javascript - 如何在 reactjs 中设置下拉列表的选定索引？

Question

我有两个下拉菜单，第二个由第一个控制。在第一个下拉列表中选择一个值时，它会为第二个下拉列表设置一个新的选项列表。

我遇到的问题是第二个下拉列表的选定索引被记住了，我没有看到设置选定索引的明确方法。如果这只是 javascript，我将只设置选定的索引。但是作为 react ，我不确定我应该做什么。

render() {
        let renderWorkItemTypes = (workItemType: TFS_WorkItemTracking_Contracts.WorkItemType) => {
            return <option value={workItemType.name}>{workItemType.name}</option>;
        };

        return <select onChange={this.props.workItemTypeChanged}>{this.props.workItemTypes.map(renderWorkItemTypes) }</select>;
    }

Answer 1

我建议你使用 Prop value的 <Select>如 React 所述:

<select value="B">
 <option value="A">Apple</option>
 <option value="B">Banana</option>
 <option value="C">Cranberry</option>
</select>

当您的 onChange触发器，使用 setState 编辑您的组件状态并更改 <select>值:<select value={this.state.value}> ？让选择字段值取决于您的组件状态允许您控制默认值并因此在第一个选择字段重置第二个选择字段时更改它。