使用自定义复选框实现数组对象增删及选中状态判断的最佳方法

1. 调整点击事件处理函数 #

原有逻辑仅支持新增条目，补充存在性判断、删除逻辑即可实现勾选新增、取消勾选删除的效果：

const handleFilterValues = (meta_name, meta_value) => {
    const entry = { name: meta_name, value: meta_value };
    const data = [...dataArray];
    // 匹配name和value完全一致的现有条目
    const existIndex = data.findIndex(item => item.name === meta_name && item.value === meta_value);
    if (existIndex > -1) {
        // 条目已存在：对应取消勾选操作，删除该条目
        data.splice(existIndex, 1);
    } else {
        // 条目不存在：对应勾选操作，新增该条目
        data.push(entry);
    }
    setDataArray(data);
}

2. 复选框选中状态判断 #

调用以下方法即可根据当前数组状态，判断对应复选框是否需要置为选中状态：

const isChecked = (meta_name, meta_value) => {
    return dataArray.some(item => item.name === meta_name && item.value === meta_value);
}

// 组件内使用示例
<input 
    type="checkbox" 
    checked={isChecked('meta_browser', 'chrome')}
    onChange={() => handleFilterValues('meta_browser', 'chrome')}
/>

注意点 #

• 匹配条目时必须同时校验name和value两个字段，避免同维度下不同值的选项被误判
• 操作状态数组时始终先解构生成新数组再修改，保证React可以正常触发状态更新重渲染

内容的提问来源于stack exchange，提问作者Gurupal singh