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

Question

将两个不同的选择输入放在单个知情反应表单中并更改一个选择输入的值时，也会强制其他选择输入上的选择值也发生变化。

请在此处找到示例代码。

<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

我做了什么：

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

然后在渲染方法中：

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