如何在Single React通知表单中处理两个不同的Select输入

Question

On putting two different select inputs within single Informed React form and changing value of one select input forces the select value to get changed on other select input also.

Please find the sample code here.

       <Form id="text-form" onSubmit={submittedValues=>this.onSave(submittedValues)}>
          {formApi=>(
                    <div class="columns is-mobile">
                        <div class="column ">
                            <div className="textAlignLeft">
                                <label htmlFor="select-status">Y</label>
                                <Select field="status" id="select-status" className="selectStyle">
                                    <Option value="" disabled>
                                    Select One...
                                    </Option>
                                    {_.map(myData,(val) => {
                                        return <Option value={val.y}>{val.y}</Option>
                                    })}
                                </Select>
                            </div>
                        </div>
                        <div class="column ">
                            <div className="textAlignLeft">
                                <label htmlFor="sub-class">X</label>
                                <Select field="status" id="sub-class" className="selectStyle">
                                    <Option value="" disabled>
                                    Select One...
                                    </Option>
                                    {_.map(myData,(val) => {
                                        return <Option value={val.x}>{val.x}</Option>
                                    })}
                                </Select>
                            </div>
                        </div>
                    </div>
           )}
        </Form>

Answer 1

What I did :

      this.setState({
        countries: [{key: '', value: '', display: '(Kies een land)'}].concat(countriesFromApi).map((country) => <option key={country.key} value={country.value}>{country.display}</option>)

and then in the render method :

                <div className="col-md-4">
                    <Select field="Country" id="select-status">
                        {this.state.countries}
                    </Select>   
                </div>