console.log React 中选中的复选框值的数组

Question

我想 console.log 一个已选中复选框的数组。就像选中复选框 1、2 和 5 一样，我希望它在控制台中显示为每个复选框值的数组。我可以获得选择显示在控制台中的最后一个值，但我无法获得所有选中的复选框的数组以显示。它们只是分开显示。

import { CheckboxData } from "../../../Data/SurveyData";

class CheckboxForm extends Component {
  constructor(props) {
    super(props);
    this.state = { value: [] };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
    console.log("Checkbox: ", event.target.value);
  }

  handleSubmit(event) {
    event.preventDefault();
  }

  render() {
    return (
      <div
        id="checkboxContainer"
        className="container"
        onSubmit={this.handleSubmit}
      >
        {CheckboxData.map((data, key) => {
          return (
            <div key={key}>
              <h5>{data.question}</h5>
              <div className="form-check">
                <input
                  className="form-check-input "
                  required={data.required}
                  name={data.name}
                  type={data.type}
                  value={data.options[0].value}
                  id={`${data.options[0].name}-${key}`}
                  onChange={this.handleChange}
                />
                <label
                  className="form-check-label "
                  htmlFor={`${data.name}-${key}`}
                >
                  {data.options[0].label}
                </label>
              </div>
              <div className="form-check">
                <input
                  className="form-check-input "
                  required={data.required}
                  name={data.name}
                  type={data.type}
                  value={data.options[1].value}
                  id={`${data.options[1].name}-${key}`}
                  onChange={this.handleChange}
                />
                <label
                  className="form-check-label "
                  htmlFor={`${data.name}-${key}`}
                >
                  {data.options[1].label}
                </label>
              </div>
              <div className="form-check">
                <input
                  className="form-check-input "
                  required={data.required}
                  name={data.name}
                  type={data.type}
                  value={data.options[2].value}
                  id={`${data.options[2].name}-${key}`}
                  onChange={this.handleChange}
                />
                <label
                  className="form-check-label "
                  htmlFor={`${data.name}-${key}`}
                >
                  {data.options[2].label}
                </label>
              </div>
              <div className="form-check">
                <input
                  className="form-check-input "
                  required={data.required}
                  name={data.name}
                  type={data.type}
                  value={data.options[3].value}
                  id={`${data.options[3].name}-${key}`}
                  onChange={this.handleChange}
                />
                <label
                  className="form-check-label "
                  htmlFor={`${data.name}-${key}`}
                >
                  {data.options[3].label}
                </label>
              </div>
              <div className="form-check">
                <input
                  className="form-check-input "
                  required={data.required}
                  name={data.name}
                  type={data.type}
                  value={data.options[4].value}
                  id={`${data.options[4].name}-${key}`}
                  onChange={this.handleChange}
                />
                <label
                  className="form-check-label "
                  htmlFor={`${data.name}-${key}`}
                >
                  {data.options[4].label}
                </label>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}

export default CheckboxForm;

SurveyData.js 文件中的数据如下：

  {
    page: 2,
    name: "checkbox",
    question: "Check all that apply. I understand:",
    type: "checkbox",
    options: [
      {
        name: "checkbox1",
        value: "I am entering into a new contract.",
        label: "I am entering into a new contract.",
      },
      {
        name: "checkbox2",
        value:
          "I will be responsible for $49.95 each month until my contract is over.",
        label:
          "I will be responsible for $49.95 each month until my contract is over.",
      },
      {
        name: "checkbox3",
        value: "I have three days to cancel.",
        label: "I have three days to cancel.",
      },
      {
        name: "checkbox4",
        value:
          "If I cancel after three days, I will be responsible for the remainder of the contract.",
        label:
          "If I cancel after three days, I will be responsible for the remainder of the contract.",
      },
      {
        name: "checkbox5",
        value:
          "My system is monitored and if it is set off, the cops will come to my home.",
        label:
          "My system is monitored and if it is set off, the cops will come to my home.",
      },
    ],
  },
];```

Answer 1

您可以更改您的 handleChange 函数来更新数组 (this.state.value) 而不仅仅是记录用户输入值。然后在this.setState 的回调中，您可以注销数组中的所有值。

下面的代码将查看该值是否已存在于您的数组中；如果确实存在，则将其删除，否则将值添加到数组中

  handleChange(event) {
    const input = event.target.value;
    this.setState(
      {
        value: this.state.value.includes(input)
          ? this.state.value.filter((item) => item !== input)
          : [...this.state.value, input]
      },
      () => {
        console.log(this.state.value);
      }
    );
  }

其他可能使事情变得更容易的方法是查看react-hook-form 或Formik（我认为这比钩子形式更难学习）。不过，这些库将为您管理所有这些表单状态，因此您不必担心。