处理 CheckBox 反应选中和未选中，使列表进入状态答案

【问题标题】：HandleCheckBox react checked and unchecked , get a list into a state处理 CheckBox 反应选中和未选中，使列表进入状态
【发布时间】：2021-03-11 14:09:35
【问题描述】：

我有一长串复选框（没有优化），我想让它们处于一种状态（选中的那个），我不确定如何处理它希望得到帮助（点击时也应该处理取消选中)...

              <div className=' row float-center d-flex justify-content-center '>
                <label className='m-3'>
                  <input
                    name='1'
                    type='checkbox'
                    checked={this.state.isGoing}
                    onChange={this.handleInputChange}
                  />
                  1
                </label>
                <label className=' m-3'>
                  <input
                    name='1.5'
                    type='checkbox'
                    checked={this.state.isGoing}
                    onChange={this.handleInputChange}
                  />
                  1.5
                </label>
              </div>

【问题讨论】：

请详细说明您的问题。你到底想达到什么目的？如果复选框被选中或未进入状态，您是否希望存储有关复选框的信息？
采取下面给出的答案

标签： javascript html reactjs jsx

【解决方案1】：

class Human extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkState: {
        isGoing1: false,
        isGoing2: false
      }
    };
  }

  handleInputChange = (event) => {
    this.setState({
      ...this.state,
      checkState: {
        ...this.state.checkState,
        [event.target.name]: event.target.checked
      }
    });
  };

  render() {
    return (
      <div className=" row float-center d-flex justify-content-center ">
        <label className="m-3">
          <input
            name="isGoing1"
            type="checkbox"
            checked={this.state.isGoing1}
            onChange={this.handleInputChange}
          />
          1
        </label>
        <label className=" m-3">
          <input
            name="isGoing2"
            type="checkbox"
            checked={this.state.isGoing2}
            onChange={this.handleInputChange}
          />
          1.5
        </label>
      </div>
    );
  }
}

【讨论】：

【解决方案2】：

就是这样：

import React, { Component, Fragment } from "react";
import "./style.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isGoing1: false, isGoing2: false };
    this.handleInputChange1 = this.handleInputChange1.bind(this);
    this.handleInputChange2 = this.handleInputChange2.bind(this);
  }
  componentDidMount() {
    this.setState({ isGoing1: false });
    this.setState({ isGoing2: false });
  }
  componentWillUnmount() {
    this.setState({ isGoing1: false });
    this.setState({ isGoing2: false });
  }
  componentDidUpdate(prevProps) {
    console.log("isGoing1" + this.state.isGoing1);
    console.log("isGoing2" + this.state.isGoing2);
  }

  handleInputChange1 = () => {
    this.setState(state => ({
      isGoing1: !state.isGoing1
    }));
  };
  handleInputChange2 = () => {
    this.setState(state => ({
      isGoing2: !state.isGoing2
    }));
  };

  render() {
    return (
      <div className=" row float-center d-flex justify-content-center ">
        <label className="m-3">
          <input
            name="1"
            type="checkbox"
            checked={this.state.isGoing1}
            onChange={this.handleInputChange1}
          />
          1
        </label>
        <label className=" m-3">
          <input
            name="1.5"
            type="checkbox"
            checked={this.state.isGoing2}
            onChange={this.handleInputChange2}
          />
          1.5
        </label>
      </div>
    );
  }
}

见：https://stackblitz.com/edit/react-dw9ff6

【讨论】：

这不是一个好的解决方案，因为我不想为每个复选框创建一个新状态。我想要一个带有列表复选框的状态：[]。
如何知道你想要多少个复选框？如果我们采用它，那么我们只需要通过 map 对它们进行迭代，但是其中的逻辑非常简单
我想要 20 个带有更大数字的复选框。所以这个解决方案不是最优的。
你应该已经创建了组件