React复选框组件状态数组仅存单个元素，新元素覆盖旧元素问题

每个Checkbox组件都独立维护自己的checkboxVal状态数组，多个复选框实例之间的状态完全隔离。当你勾选另一个复选框时，新的Checkbox组件的数组是空的，添加当前值后自然只会有一个元素，看起来就像旧值被覆盖了。

把共享的选中值数组状态提升到父组件，让所有Checkbox子组件共用同一个状态，通过props传递更新逻辑。

修改后的子组件代码 #

function Checkbox({ id, name, value, children, placeholder, isChecked, onChange }) {
    const [checked, setChecked] = useState(isChecked);
    
    const displayOtherTextareaInput = (e) => {
        setChecked(e.target.checked);
    }   
    
    const handleChange = (e) => {
        displayOtherTextareaInput(e);
        onChange(e.target.value, e.target.checked);
    }

    return ( <>
        <CheckboxContainer>
            <Input 
                type="checkbox" 
                id={id} 
                name={name} 
                value={value} 
                checked={checked}
                onChange={e => handleChange(e)}
            />
            <Label for={id}>
                {children}
            </Label>
        </CheckboxContainer>  
        {id === 'other' && checked &&
                    <Textarea placeholder={placeholder} name={name}></Textarea>
            }
    </>)
}

父组件示例代码 #

function CheckboxGroup() {
    const [checkboxVal, setCheckboxVal] = useState([]);

    const handleCheckboxChange = (value, isChecked) => {
        setCheckboxVal(prev => {
            if (isChecked) {
                // 不可变添加：如果值不存在则加入数组
                return prev.includes(value) ? prev : [...prev, value];
            } else {
                // 不可变移除：过滤掉对应值
                return prev.filter(item => item !== value);
            }
        });
    };

    return (
        <div>
            <Checkbox 
                id="option1" 
                name="options" 
                value="option1" 
                isChecked={checkboxVal.includes("option1")}
                onChange={handleCheckboxChange}
            >
                选项1
            </Checkbox>
            <Checkbox 
                id="option2" 
                name="options" 
                value="option2" 
                isChecked={checkboxVal.includes("option2")}
                onChange={handleCheckboxChange}
            >
                选项2
            </Checkbox>
            <Checkbox 
                id="other" 
                name="options" 
                value="other" 
                isChecked={checkboxVal.includes("other")}
                onChange={handleCheckboxChange}
                placeholder="请输入其他内容"
            >
                其他
            </Checkbox>
        </div>
    );
}

关键修改说明 #

• 父组件统一管理checkboxVal数组，所有复选框的选中状态由父数组决定，保证状态同步
• 子组件不再维护自己的选中值数组，只负责自身的checked状态（用于控制"其他"选项的文本框显示），并通过onChange回调通知父组件状态变化
• 父组件的更新逻辑使用函数式更新setCheckboxVal(prev => ...)，确保每次更新都基于最新的状态，避免闭包问题
• 原handleCheck函数的逻辑问题也被修正：先判断勾选状态，再决定添加或移除值，而不是先添加再过滤

内容的提问来源于stack exchange，提问作者Christoper Chamberlain