如何使用 react hook 实现多个复选框的勾选状态管理？

使用 React Hooks 实现多个复选框的勾选状态管理

要管理多个复选框的勾选状态，我们可以使用 React 的 useState Hook。首先，我们需要定义一个状态，这个状态是一个对象，其键是每个复选框的标识符（例如 id 或 name），值是一个布尔值，表示该复选框是否被选中。

步骤 1: 定义状态

使用 useState 初始化复选框的状态：

jsx
import React, { useState } from 'react';

function CheckboxGroup() {
    const [checkedState, setCheckedState] = useState({
        checkbox1: false,
        checkbox2: false,
        checkbox3: false
    });
}

步骤 2: 创建复选框元素

接下来，我们创建多个复选框，并使用上面定义的状态来控制每个复选框的勾选状态：

jsx
return (
    <div>
        <label>
            <input
                type="checkbox"
                checked={checkedState.checkbox1}
                onChange={() => handleCheckboxChange('checkbox1')}
            /> Checkbox 1
        </label>
        <label>
            <input
                type="checkbox"
                checked={checkedState.checkbox2}
                onChange={() => handleCheckboxChange('checkbox2')}
            /> Checkbox 2
        </label>
        <label>
            <input
                type="checkbox"
                checked={checkedState.checkbox3}
                onChange={() => handleCheckboxChange('checkbox3')}
            /> Checkbox 3
        </label>
    </div>
);

步骤 3: 处理状态变更

最后，我们需要定义一个函数 handleCheckboxChange，用于更新复选框的勾选状态。这个函数接收复选框的标识符作为参数，并更新状态：

jsx
function handleCheckboxChange(id) {
    setCheckedState(prevState => ({
        ...prevState,
        [id]: !prevState[id]
    }));
}

完整组件示例：

将所有步骤组合在一起，我们得到以下 React 组件：

jsx
import React, { useState } from 'react';

function CheckboxGroup() {
    const [checkedState, setCheckedState] = useState({
        checkbox1: false,
        checkbox2: false,
        checkbox3: false
    });

    function handleCheckboxChange(id) {
        setCheckedState(prevState => ({
            ...prevState,
            [id]: !prevState[id]
        }));
    }

    return (
        <div>
            <label>
                <input
                    type="checkbox"
                    checked={checkedState.checkbox1}
                    onChange={() => handleCheckboxChange('checkbox1')}
                /> Checkbox 1
            </label>
            <label>
                <input
                    type="checkbox"
                    checked={checkedState.checkbox2}
                    onChange={() => handleCheckboxChange('checkbox2')}
                /> Checkbox 2
            </label>
            <label>
                <input
                    type="checkbox"
                    checked={checkedState.checkbox3}
                    onChange={() => handleCheckboxChange('checkbox3')}
                /> Checkbox 3
            </label>
        </div>
    );
}

export default CheckboxGroup;

这个组件管理了三个复选框的勾选状态，并可以根据用户的操作动态更新状态。这是使用 React Hooks 管理多个复选框状态的一种简单而有效的方法。