reactjs - 如何从下拉列表（REACT）中选择的 API 获取布尔数据？

Question

我创建了一个带有“true”和“false”选项的下拉列表。我从我的 API 中获得了一个表格中的所有数据。

更新时，我有一个获取行数据的表单。使用布尔值，只要我让 html 类型在“文本”上，它就会变为真/假。

我想使用下拉菜单，但目前它是静态的，所以它始终处于“真实”状态。

如何选择正确的值并更新更改？

toSelectOption.js

export const trueFalse = [
    { label: "true", value: "Y" },
    { label: "false", value: "F" }
];

更新.jsx

renderTrueFalse() {
    return trueFalse.map((item) => {
        if (this.state.showKey === true) {
            return (
                <option value={item.value}>{item.label}</option>
            );
        }
    });
}

    //...
    <Formik
        initialValues={{
            //...
            showKey,
            //...

        }}
        onSubmit={this.onSubmit}
        //...
        {
            (props) => (
                <Form>
                    //...

                        <Col md="3">
                            <FormGroup>
                                <label>Show Key</label>
                                <Field className="form-control" component="select"
                                       name="showKey">
                                    {this.renderTrueFalse()}
                                </Field>
                            </FormGroup>
                        </Col>

                    //...
                    <div className="d-flex justify-content-center">
                        <MDBBtn type="submit"
                                className="btn btn-outline-success waves-effect">Salva</MDBBtn>
                    </div>

                </Form>
            )
        }
    </Formik>
    //...     

Answer 1

我认为您缺少组件onChange上的事件处理程序<Field>。尝试添加这个：

更新.jsx

<Field className="form-control"
       component="select"
       name="showKey"
       onChange={e => this.handleOnChange(e)}
>

然后在你的函数下面renderTrueFalse()，添加这个：

handleOnChange = e => {
  console.log('value->', e.target.value) // e.target.value is your output (Y or F) from the select option
  // do whatever you wanna do here with the value from the option in this case ('Y' OR 'F')
}

打开您的(F12)，当您选择正确的选项时develop Tools，您确实收到了。updated value

在仅使用 React 的示例上检查此工作，here