javascript - 一个下拉字段会导致另一下拉字段的值更新

Question

我有两个下拉菜单，当dropdown-1更改时，dropdown-2的选定选项应更改为与dropdown-1<相同/strong>

下拉菜单-1:

<div className="select-style-right joiner-select">
    <select className="selectalljoiners" onChange={this.handleMainSelectChanged} value={this.state.selectedJoinerValue}>
        <option value="">Select</option>
        <option value="Permanent">Permanent</option>
        <option value="Probationary">Probationary</option>
        <option value="Contractual">Contractual</option>
        <option value="Intern">Intern</option>
    </select>
</div>

下拉菜单2:

<div className="select-style-right joiner-select">
    <select className={index} value={this.state.selectedJoinerValue}>
        <option value="">Select</option>
        <option value="Permanent">Permanent</option>
        <option value="Probationary">Probationary</option>
        <option value="Contractual">Contractual</option>
        <option value="Intern">Intern</option>
    </select>
</div>

handleMainSelectChanged:

handleMainSelectChanged = (e) => {
        thisclass.setState({
            selectedJoinerValue: e.target.value
        })
}

React新手，不知道如何实现这一点。请大家帮忙。

Answer 1

如果其中一个下拉列表发生更改，第二个下拉列表将采用相同的选定选项。

https://jsfiddle.net/b1atetou/

class Example extends React.Component {
    constructor() {
        super();
        this.state = { value: "" }
    }

    handleDropDownChage = (event) => {
        this.setState({value: event.target.value});
    }

    render() {
        return ( 
            <div>
                <div>
                    <select onChange={this.handleDropDownChage} value={this.state.value}>
                        <option value="">Select</option>
                        <option value="Permanent">Permanent</option>
                        <option value="Probationary">Probationary</option>
                        <option value="Contractual">Contractual</option>
                        <option value="Intern">Intern</option>
                    </select>
                </div>

                <div>
                    <select onChange={this.handleDropDownChage} value={this.state.value}>
                        <option value="">Select</option>
                        <option value="Permanent">Permanent</option>
                        <option value="Probationary">Probationary</option>
                        <option value="Contractual">Contractual</option>
                        <option value="Intern">Intern</option>
                    </select>
                </div>
            </div>
        );
    }
}