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

【问题标题】：How to get boolean data from API selected in a Dropdown (REACT)?如何从下拉列表（REACT）中选择的 API 获取布尔数据？
【发布时间】：2019-09-12 12:56:55
【问题描述】：

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

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

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

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

toSelectOption.js

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

Update.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>
    //...

【问题讨论】：

你在用 Formik 吗？
@S.A.R.A.您可能缺少选择的 onChange 处理程序，并且可能因为它保持静态，这可能是第一个渲染案例（默认）
选择true或false选项后，您要更新什么？
@mindmaster 我想在更新 True 和 False 之间的正确值时显示。目前我默认情况下是真的。

标签： reactjs formik

【解决方案1】：

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

Update.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')
}

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

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

【讨论】：