我可以使用 React Hooks 跟踪多个复选框还是需要使用 Class 组件？答案

【问题标题】：Can I track multiple checkboxes with React Hooks or do I need to use a Class component?我可以使用 React Hooks 跟踪多个复选框还是需要使用 Class 组件？
【发布时间】：2021-05-03 23:06:15
【问题描述】：

我正在学习 React Hooks 并试图了解如何管理多个带状态的复选框。如果我只有一个复选框，我下面的代码可以工作 - 使用 check 作为状态 - 但是当我有多个框时，这不起作用，因为onChange = {() => setCheck(!check)} 将立即更改所有框的检查状态。

我认为如果我使用 React 类组件（类似于 this.handleCheckboxChange 仅更改特定复选框的状态）是可行的，但我正在尝试看看是否可以使用钩子来做到这一点。

import React, { useState } from 'react';

const Search = ({ options }) => {
    const [check, setCheck] = useState(false);

    const renderedOptions = options.map((option) => {
        return (
            <div key={option}>
                <label>
                    <input
                        checked={check ? 'checked' : ''}
                        type="checkbox"
                        name={option}
                        value={option}
                        onChange={() => {
                            setCheck(!check);
                        }}></input>
                    {option}
                </label>
            </div>
        );
    });

    return (
        <form>
            <label>Search Engines (check all that apply)</label>
            {renderedOptions}
        </form>
    );
};

export default Search;

【问题讨论】：

这与钩子与类的关系为零。您需要的只是一个状态数组（无论是在函数中还是在基于类的组件中）。 const [check, setCheck] = useState(options.map(_ => false)) 和基本状态数组代码来更新它。您也可以使用一个对象并使用option 作为键。
刚刚看到您的编辑，谢谢。我会努力的。
@ChrisG 实际上，我有一个问题。我已经想出了如何使用对象而不是数组来执行此操作 - 如果我没有密钥，如何将事件定位到一个特定的复选框？假设我创建了一个 handleChange 函数 (const handleChange = (e) => { **setCheck** })，并在复选框渲染中放入 onChange={handleChange]。由于e.target.value 不在我的布尔值状态数组中，setCheck 会是什么样子？
你会使用 options.map((option, i) 并使用类似 e => setState([...check, [i]: e.target.checked])

标签： javascript reactjs forms react-hooks

【解决方案1】：

您可以使用一个对象作为状态，每个propname作为复选框的名称，并且可以将选中的信息作为值。

const [values, setValues] = useState({});
handleChange = (e) => setValues({ ...values, [e.target.name]: e.target.checked });

您可以将选项作为初始值或默认值绑定到状态。和

【讨论】：