Question

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

我遇到的问题是第二个下拉列表的选定索引正在被记住，我没有看到设置所选索引的明确方法。如果这只是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>;
    }

Answer 1

我建议您使用React所描述的value道具<Select>：

<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}>？根据组件状态选择字段值允许您控制默认值，因此在第一个选择字段重置第二个选择字段时更改它。

Answer 2

问题是当新道具进入时，我并没有重置价值。

最终代码：

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

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

2 个答案: