javascript - 如何在 React 的数据预览中显示复选框 bool 值？

Question

我正在尝试在 React 中设置一个复选框，以便它显示一个 bool 值(true/false 或 checked/未选中)在数据预览框中。我还无法让它工作。

我猜我的 onChange 事件不正确 (handleOnChangeAgreementCheckbox)。我该如何解决这个问题？

Demo on codesandbox

代码

          <Input
            name="eligibleAge"
            type="checkbox"
            label="I agree"
            checked={this.state.active}
            value={this.state.checked}
            onChange={(e) => {
              this.handleOnChangeAgreementCheckbox({
                target: {
                  name: e.target.name,
                  value: e.target.checked,
                },
              });
            }}
          />

数据预览中所需的输出:

    "eligibleAge": true

或

    "eligibleAge": "checked"

(谢谢!我是 React 框架的新手。)

Answer 1

看来您可能为复选框使用了错误的组件。试试这个:

更改此行:

import { Input, Button } from "react-advanced-form-addons";

至:

import { Input, Button, Checkbox } from "react-advanced-form-addons";

然后更改您的复选框渲染代码:

<Input
  name="eligibleAge"
  type="checkbox"
  label="I agree"
  checked={this.state.active}
  value={this.state.checked}
  onClick={() => this.handleOnChangeAgreementCheckbox()}
/>

对此:

<Checkbox
  name="eligibleAge"
  label="I agree"
  checked={this.state.eligible}
/>