如何使用 React Hook 处理多个复选框答案

【问题标题】：How to handle multiple checkboxes using React Hook如何使用 React Hook 处理多个复选框
【发布时间】：2020-12-21 10:15:40
【问题描述】：

我需要使用 React 中的钩子来控制所有复选框

父母代码

const Filter = () => {

  const [isChecked, setIsChecked] = useState({
    all: false,
    without: false,
    one: false,
    two: false,
    three: false,
  })

  const handleChange = ({ target : { name, checked } }) => {
    setIsChecked({ 
      ...isChecked, 
      [name]: checked 
    })
  }

  const checkboxes = [
    {
      key: "all",
      name: "all",
      htmlFor: "all",
      label: "Все"
    },
    {
      key: "without",
      name: "without",
      htmlFor: "without",
      label: "Без пересадок"
    },
    {
      key: "one",
      name: "one",
      htmlFor: "one",
      label: "1 пересадка"
    },
    {
      key: "two",
      name: "two",
      htmlFor: "two",
      label: "2 пересадки"
    },
    {
      key: "three",
      name: "three",
      htmlFor: "three",
      label: "3 пересадки"
    },
  ];
  return (
    <div className="content__filter">
      <div className="content__filter__name">
        Количество пересадок
      </div>
      <div className="content__filter__list">
        <ul>
          {checkboxes.map(item => (
            <ListItem 
              key={item.key}
              name={item.name} 
              htmlFor={item.htmlFor} 
              label={item.label}
              checked={isChecked[item.name]}
              onChange={handleChange}
            />
          ))}
        </ul>
      </div>
    </div>
  );
};

export default Filter;

儿童代码

const ListItem = ({ type = "checkbox", name, htmlFor, label, onChange, checked }) => {
  console.log(checked)
  return (
    <li>
      <input type={type} name={name} checked={checked} onChange={onChange}/>
      <label htmlFor={htmlFor}>{label}</label>
    </li>
  )
};

export default ListItem;

复选框根本没有反应。我的意思是，如果我点击，什么都不会发生。我总是在孩子身上得到虚假的财产，而且无法切换。如果我将isChecked 设置为空对象（如本例中的https://codesandbox.io/s/react-hooks-usestate-xzvq5?file=/src/index.js:380-382），它也不起作用我做错了什么？任何帮助表示赞赏

附：复选框的 CSS

li {
  display: flex;
  align-items: center;
  height: 40px;

  &:hover {
    background: #F1FCFF;
    cursor: pointer;
  }

  input {
    display: none;
  }

  label {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 13px;
    color: #4A4A4A;
    cursor: pointer;
  }

  input + label {
    display: inline-flex;
    align-items: center;
    user-select: none;
  }

  input + label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    flex-grow: 0;
    border: 1px solid #9ABBCE;
    border-radius: 2px;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-position: center center;
  }

  input:checked + label::before {
    border-color: #2196F3;
    background-image: url("../../img/shape.png");
  }
}

【问题讨论】：

有什么问题？它似乎正在工作。
@Prateek Thapa，当我点击复选框时不会切换
你的意思是复选框在点击时不是checked？
@Prateek Thapa，是的
像那个例子一样创建一个沙箱？

标签： javascript reactjs checkbox react-hooks

【解决方案1】：

好了，问题解决了。这都是关于输入属性的。我将htmlFor 属性传递给item.name 的ListItem，但不是id。所以我需要在我的checkboxes 数组中创建一个 id 属性，并像这样传递htmlFor 属性htmlFor={item.id}

不要忘记将 id 属性传递给 ListItem 以及 id={item.id}

【讨论】：