ReactJS中复选框取消勾选后无法重新勾选且提交值不显示怎么办

问题原因 #

• 多选复选框的状态绑定逻辑错误：所有复选框的checked属性都直接绑定了整个values.products，没有判断当前遍历到的单个产品是否在已选中列表中，导致状态完全混乱，无法正常切换选中状态。
• 选中值更新逻辑错误：onChange回调里直接把当前点击的复选框的value覆盖赋值给products，既没有处理取消勾选的移除逻辑，也没有做多选的追加/移除操作，最终提交时无法拿到正确的选中值集合。
• 基础属性赋值错误：复选框的name和value属性错误绑定了values.products，应该分别绑定固定的表单字段名和当前遍历到的单个product值。

修复方案 #

1. 首先在表单初始值配置中，将products字段初始值设为空数组，用于存储所有选中的产品值。
2. 修正表单部分代码如下：

<form onSubmit={handleSubmit}>
    {products.map((product) => (
      <div key={product}>
        <Input
          name="products"
          value={product}
          checked={values.products?.includes(product) || false}
          onChange={({ target }) => {
            const selectedList = values.products || []
            if (target.checked) {
              setFieldValue("products", [...selectedList, product])
            } else {
              setFieldValue("products", selectedList.filter(item => item !== product))
            }
          }}
        />
      </div>
    ))}
    <button type="submit">Submit</button>
</form>

3. 提交时直接读取values.products即可拿到所有选中的产品值数组。

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