React项目中如何将多选框多个选中值存入对象数组对应字段

你现有代码的问题在于每次触发onChange时直接用当前选中的单个值覆盖了整个字段，没有结合已有的选中值做增删处理，同时多选框没有绑定checked属性，状态和数据不同步。按以下两步修改即可：

1. 修改onChange事件处理函数 #

调整逻辑，根据勾选状态对已有选中值做增删操作，同时修正异步更新导致的sdk赋值旧值问题：

const createOnChangeHandlerUnits = (floorPlan: FloorPlan, property: 'enabledUnits') => (
    e: React.ChangeEvent<HTMLInputElement>
) => {
    const { value, checked } = e.target;

    setFloorPlans(prevFloorPlans => {
        const newFloorPlans = prevFloorPlans.map(entry => {
            if (entry.id === floorPlan.id) {
                // 拆分已有选中值为数组，过滤空值避免异常
                const selectedUnits = entry[property].split(', ').filter(Boolean);
                const newSelectedUnits = checked 
                  ? [...new Set([...selectedUnits, value])] // 勾选时新增值，自动去重
                  : selectedUnits.filter(unit => unit !== value); // 取消勾选时移除对应值
                // 拼接为逗号分隔的字符串存储
                return {...entry, [property]: newSelectedUnits.join(', ')};
            }
            return entry;
        });
        // 用更新后的新数组调用sdk方法，避免异步更新导致的旧值问题
        props.sdk.field.setValue(newFloorPlans);
        return newFloorPlans;
    });
};

2. 修改多选框渲染代码 #

新增checked属性绑定，让多选框的选中状态和存储的数据保持同步：

{dummyUnits.map((unit, i) => {
   // 判断当前单位是否被选中，同步勾选状态
   const isChecked = floorPlan.enabledUnits.split(', ').filter(Boolean).includes(unit);
   return (
      <CheckboxField 
        id={unit} 
        data-id={i} 
        key={i} 
        value={unit} 
        checked={isChecked}
        onChange={createOnChangeHandlerUnits(floorPlan, 'enabledUnits')} 
        labelText={unit} 
      />
)
})}

注意事项 #

• 请确保你的FloorPlan类型定义中enabledUnits字段为字符串类型，和现有结构保持一致
• 你提供的示例数据中两个条目id完全相同，实际开发时请保证每个条目的id唯一，否则修改一个条目时会同时命中所有id相同的条目，导致数据异常

内容的提问来源于stack exchange，提问作者David R