javascript - 如何在 Single React Informed Form 中处理两个不同的 Select 输入

Question

在单个 Informed React 表单中放置两个不同的选择输入并更改一个选择输入的值会强制选择值在其他选择输入上也发生更改。

请在此处找到示例代码。

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

标签： javascriptreactjsjsx

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>