Как отобразить логическое значение флажка в предварительном просмотре данных в React?

Question

Я пытаюсь установить флажок в React, чтобы он отображал логическое значение (true / false или checked / unchecked) в окне предварительного просмотра данных. Я не мог заставить это работать еще.

Полагаю, мое onChange событие неверно (handleOnChangeAgreementCheckbox). Как мне это исправить?

Демонстрация кодов и ящиков

Код

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

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

Answer 2

Я буду использовать ваш ввод в качестве примера:

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

Функция handleOnChangeAgreementCheckbox:

handleOnChangeAgreementCheckbox = (e) => {
 this.setState({
  eligibleAge: e.target.value
 })
}

И вы можете использовать this.state.eligibleAge для получения истинных / ложных