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

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

我遇到的问题是，第二个下拉列表中的选定索引被记住了，我看不到设置选定索引的明确方法。如果这只是javascript，我只需要设置所选的索引。但是，我不知道我该怎么做

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>;
    }

render（）{
让renderWorkItemTypes=（workItemType:TFS\U WorkItemTracking\U Contracts.workItemType）=>{
返回{workItemType.name}；
};
返回{this.props.workItemTypes.map（renderWorkItemTypes）}；
}

我建议您使用

的道具

值，如下所述：


苹果
香蕉
蔓越莓

当触发
onChange
时，使用
setState
编辑组件状态，并更改
值：
？根据组件状态设置“选择”字段值可以控制默认值，从而在第一个“选择”字段重置第二个“选择”字段时对其进行更改。
问题在于，当新道具出现时，我也没有重置该值

最终代码：

class WorkItemTypeDropDown extends React.Component<IWorkItemTypeDropdownProps, any> {
    constructor(props: IWorkItemTypeDropdownProps) {
        super(props);
        this.state = {
            value: ""
        };
    }

    componentWillReceiveProps(nextProps: IWorkItemTypeDropdownProps, nextContext: any) {
        this.setState({
            value: ""
        });
    }

    onChange(e: React.FormEvent) {
        let select = e.target as HTMLSelectElement;
        let workItemType = select.options[select.selectedIndex].getAttribute("value");

        this.setState({
            value: workItemType
        });

        this.props.workItemTypeChanged(e);
    }

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

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

类WorkItemTypeDropDown扩展了React.Component{
构造函数（道具：IWorkItemTypeDropdownProps）{
超级（道具）；
此.state={
值：“”
};
}
组件将接收Props（nextProps:IWorkItemTypeDropdownProps，nextContext:any）{
这是我的国家({
值：“”
});
}
onChange（e:React.FormEvent）{
让select=e.target作为HTMLSelectElement；
让workItemType=select.options[select.selectedIndex].getAttribute（“值”）；
这是我的国家({
值：workItemType
});
此.props.workItemTypeChanged（e）；
}
render（）{
让renderWorkItemTypes=（workItemType:TFS\U WorkItemTracking\U Contracts.workItemType）=>{
返回{workItemType.name}；
};
返回{this.props.workItemTypes.map（renderWorkItemTypes）}；
}
}
使
成为受控组件。请看。它是受控制的，但根本的问题是我还需要在更新属性时重置状态。好吧，在你的问题中它不受控制。请阅读，以便下次提供更好的示例。我正在这样做，但我还需要执行以下操作：1）实现重置本地状态的componentWillReceiveProps。2） 实现一个本地onChange，在向上传播之前保存状态。如果向上传播值，则该值可能应由父级设置，而不是保留为本地状态。因此，基本上子级将触发更改事件，然后父级将更新“全局”状态，然后子级的道具将再次获得该状态。当然，这也是有道理的，当我开始消费房产的时候，我可能会在那里结束。是的。全局状态知道，每当X改变时，它必须重置Y。
WorkItemTypeDropDown
根本不需要知道这一点，它只显示传入的任何值。
class WorkItemTypeDropDown extends React.Component<IWorkItemTypeDropdownProps, any> {
    constructor(props: IWorkItemTypeDropdownProps) {
        super(props);
        this.state = {
            value: ""
        };
    }

    componentWillReceiveProps(nextProps: IWorkItemTypeDropdownProps, nextContext: any) {
        this.setState({
            value: ""
        });
    }

    onChange(e: React.FormEvent) {
        let select = e.target as HTMLSelectElement;
        let workItemType = select.options[select.selectedIndex].getAttribute("value");

        this.setState({
            value: workItemType
        });

        this.props.workItemTypeChanged(e);
    }

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

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