如何使用 React useState 钩子从复选框列表中获取多个值到状态答案

【问题标题】：How get multiple values from checkbox list into state using React useState hook如何使用 React useState 钩子从复选框列表中获取多个值到状态
【发布时间】：2021-06-22 11:40:23
【问题描述】：

如何使用 React useState hook 将多个值（来自我映射的复选框）设置为状态？

当我登录selectedValue 时，它只显示最后选择的选项？提交表单时我需要所有选定的值。

const MyComponent = ({ options }: Props) => {
  const [selectedValue, setSelectedValue] = useState({});

  const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
    e.preventDefault();
    setSelectedValue({ ...selectedValue, [e.target.value]: e.target.value      
   });
console.warn(selectedValue);

  return (
      <form onSubmit={handleSubmit}>
        <ul>
          {options.map(({ id, label }) => (
            <li key={id}>
              <label htmlFor={label}>
                <input
                  onChange={(e) => {
                    setSelectedValue(e.target.value);
                  }}
                  value={id}
                  type="checkbox"
                />
                {` Checkbox ${label}`}
              </label>
            </li>
          ))}
        </ul>
        <button type="submit">Submit</button>
      </form>

【问题讨论】：

实现方法如下，请参考：stackoverflow.com/a/60461571

标签： reactjs forms checkbox use-state

【解决方案1】：

为了保存多个东西，更喜欢数组而不是对象。

在这种情况下，您需要在默认的 useState 中使用数组而不是对象：

const [selectedValue, setSelectedValue] = useState([]);

在onChange函数中：

onChange={(e) => {
   setSelectedValue([...selectedValue, e.target.value]);
 }}

【讨论】：