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>

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

，然后在render方法中：

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

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

1 个答案: