javascript - 根据一项选择重置其他选择 (ReactJS)

Question

这里的目标是每次父选择更改其值时，所有子选择都将其值重置为默认值(空字符串的第一个值)。

import React, {Component} from 'react';

class TestingSelects extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectOneValue: "",
            selectTwoValue: "",
            selectThreeValue: "",
            selectFourValue: ""
        }
    }
    selectOneOnChangeHandler = (ev) => {
        this.setState({
                        selectOneValue: ev.target.value,
                        selectTwoValue: "",
                        selectThreeValue: "",
                        selectFourValue: ""
                    });
    }

    selectTwoOnChangeHandler = (ev) => {
        this.setState({
                        ...this.state,
                        selectTwoValue: ev.target.value,
                        selectThreeValue: "",
                        selectFourValue: ""
                    });
    }

    selectThreeOnChangeHandler = (ev) => {
        this.setState({
                        ...this.state,
                        selectThreeValue: ev.target.value,
                        selectFourValue: ""
                    });
    }

    selectFourChangeHandler = (ev) => {
        this.setState({...this.state, selectFourValue: ev.target.value});
    }

    render(){
        return (
            <div>
                <form>        
                    <div>
                        <select onChange={ev => this.selectOneOnChangeHandler(ev)}>
                            <option value="">Please Select an Option</option>
                            <option value="select1option1">select 1 option 1</option>
                            <option value="select1option2">select 1 option 2</option>
                        </select>
                    </div>
                    {
                        this.state.selectOneValue === "select1option1" && 
                            <div>
                                <select onChange={ev => this.selectTwoOnChangeHandler(ev)}>
                                    <option value="">Please Select an Option</option>
                                    <option value="select2option1">select 2 option 1</option>
                                    <option value="select2option2">select 2 option 2</option>
                                    <option value="select2option3">select 2 option 3</option>
                                    <option value="select2option4">select 2 option 4</option>
                                    <option value="select2option5">select 2 option 5</option>
                                    <option value="select2option6">select 2 option 6</option>
                                    <option value="select2option7">select 2 option 7</option>
                                </select>
                            </div>
                    }
                    {
                        (this.state.selectTwoValue === "select2option1" || 
                        this.state.selectTwoValue === "select2option2" || 
                        this.state.selectTwoValue === "select2option5" || 
                        this.state.selectTwoValue === "select2option7") && 
                            <div>
                                <select onChange={ev => this.selectThreeOnChangeHandler(ev)}>
                                    <option value="">Please Select an Option</option>
                                    <option value="select3option1">select 3 option 1</option>
                                    <option value="select3option2same">select 3 option 2</option>
                                    <option value="select3option2same">select 3 option 3</option>
                                </select>
                            </div>
                    }
                    {
                        this.state.selectThreeValue === "select3option2same" && 
                            <div>
                                <select onChange={ev => this.selectFourOnChangeHandler(ev)}>
                                    <option value="">Please Select an Option</option>
                                    <option value="allowed">Yes</option>
                                    <option value="denied">No</option>
                                </select>
                            </div>
                    }
                </form>
            </div>
        )
    }
}

export default TestingSelects;

编辑:如何重现问题...

• [首次选择]:选择1个选项1
• [第二次选择]:选择2个选项1
• [第三选择]:选择3个选项1
• [第二选择]:选择2个选项2

  Here is where the 3rd select should reset to "Please Select an Option"

有人知道怎么做吗？

Answer 1

只要将状态绑定(bind)到value，一切都应该有效。每个 Prop <select>元素。您的代码不起作用的原因是您没有绑定(bind) value每个选择到组件的状态。

例如，这是您应该做的:

<select onChange={ev => this.selectOneOnChangeHandler(ev)} value={this.state.selectOneValue}>