reactjs - 如何使用 ant design 框架动态更新 Select Options 值

Question

我有一个组合框，其中有多个选项，如执行、暂停、阻止等。用户可以选择其中任何一个，但默认情况下已经选择了一个名为“执行”的选项

当服务器启动时，数据来自后端让我们说例子被阻止，我正在尝试将默认值从正在执行更新为已阻止，以便用户可以了解正在发送的服务器。

<Select size={"small"} className="mission-status">
                                <Option value="Executing">{missionStatusConts.MISSION_STATUS.EXECUTING}</Option>
                                <Option value="Completed">{missionStatusConts.MISSION_STATUS.COMPLETED}</Option>
                                <Option value="Blocked">{missionStatusConts.MISSION_STATUS.BLOCKED}</Option>
                                <Option value="Waiting">{missionStatusConts.MISSION_STATUS.WAITING}</Option>
                                <Option value="Offline">{missionStatusConts.MISSION_STATUS.OFFLINE}</Option>
                                <Option value="AllStop">{missionStatusConts.MISSION_STATUS.ALLSTOP}</Option>
                            </Select>

附上图片供引用

寻求快速帮助，我花了将近一天的时间在 antd 框架工作中完成它，但我无法完成..

感谢帮助

Answer 1

antd的Select标签有一个defaultValue属性，可以用来显示初始值。
如果你想显示第二个选项，那么代码将是:

<Select defaultValue='Completed' size={"small"} className="mission-status">
    <Option value="Executing">{missionStatusConts.MISSION_STATUS.EXECUTING}</Option>
    <Option value="Completed">{missionStatusConts.MISSION_STATUS.COMPLETED}</Option>
    <Option value="Blocked">{missionStatusConts.MISSION_STATUS.BLOCKED}</Option>
    <Option value="Waiting">{missionStatusConts.MISSION_STATUS.WAITING}</Option>
    <Option value="Offline">{missionStatusConts.MISSION_STATUS.OFFLINE}</Option>
    <Option value="AllStop">{missionStatusConts.MISSION_STATUS.ALLSTOP}</Option>
</Select>

供您引用:Antd select api