如何跟踪是否已使用 useState 钩子检查了一组中的一个或多个复选框？

Question

"反应": ">=16.14.0",
"react-dom": ">=16.14.0"
"@material-ui/core": "4.11.1",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.53",
"@material-ui/pickers": "^3.2.10",
"@material-ui/styles": "4.11.1",

这是一个 CheckBox 的示例，它切换 selected 并在未选中时显示错误。

一个复选框

const [selected, setSelected] = useState(false); 
const handleOnChange = (event) => setSelected(!selected);

<CheckBoxGroup error={!selected && 'You have to choose one!'} name="color" onChange={handleOnChange} label="Chose one" row>
  <CheckBox label="1" />
</CheckBoxGroup>;

这里是同一个，但有多个 CheckBox。我知道我需要更新我的 handleOnChange 函数，我可能会在其中使用 .find 来查看是否有任何 CheckBox 被勾选为 return true 但我无法弄清楚是什么传递给函数，即如何访问复选框数组？

多个CheckBox

const [selected, setSelected] = useState(false); 
const handleOnChange = (event) => setSelected(!selected);

<CheckBoxGroup error={!selected && 'You have to choose one!'} name="color" onChange={handleOnChange} label="Chose one" row>
  <CheckBox label="1" />
  <CheckBox label="2" />
  <CheckBox label="3" />
</CheckBoxGroup>;

Answer 1

首先，您应该给 <CheckBox> 组件一个 name 属性和一个 onChange。然后为复选框创建一个初始状态，并在初始化状态时传递它。在 change 处理程序中，我们根据相应的 name 和 checked 值设置每个复选框的状态。将 <CheckBox> 的 checked 属性设置为等于相应的状态值。

export default function App() {
  // create an initial value for checkboxes
  const initialStatus = {
    first: false,
    second: false,
    third: false
  }

  // initialize a state variable to keep track of status
  const [checkboxStatus, setCheckboxStatus] = useState(initialStatus);
  
  // handle change event of checkboxes
  const handleChange = (e) => {
    e.preventDefault(); // prevent default action
    setCheckboxStatus({
      ...checkboxStatus,
      [e.target.name]: e.target.checked
    })
  }
  
  return (
    <div className="App">
      <CheckBox label="1" name="first" onChange={handleChange} checked={checkboxStatus.first} />
      <CheckBox label="2" name="second" onChange={handleChange} checked={checkboxStatus.second} />
      <CheckBox label="3" name="third" onChange={handleChange} checked={checkboxStatus.third} />
    </div>
  );
}

Answer 2

经过一番努力，感谢@axtck 的回答让我从不同的角度看待问题。

import { useState } from 'react';
import { CheckBox, CheckBoxGroup } from '@globalization-partners/ui-components';

const [selected, setSelected] = useState([]); 
const handleOnChange = (event) => setSelected(event.target.checked ? [...selected, event.target.value] : selected.filter((data) => data !== event.target.value));

<CheckBoxGroup error={selected.length === 0 && 'You have to choose one!'} onChange={handleOnChange} label="Chose one" row>
  <CheckBox value='First' label='First' />
  <CheckBox value='Second' label='Second' />
  <CheckBox value='Third' label='Third' />
</CheckBoxGroup>;

如何跟踪是否已使用 useState 钩子检查了一组中的一个或多个复选框？

How can I track if one or more CheckBoxes in a group has been checked using useState hook?

setstate

reactjs

react-hooks