为什么我的复选框在 ReactJS 中取消选中后不返回

Question

我有复选框，您可以点击任意多个。我的问题是在我取消选中后它没有进行检查。我提交时的值也没有出现在 console.log

中

请在这里查看我的codesandbox CLICK HERE

  <Label htmlFor={id}>
      <Input
        type="checkbox"
        id={name}
        name={name}
        value={value}
        checked={checked}
        onChange={onChange}
      />
      <Indicator />
    </Label>


  <form onSubmit={handleSubmit}>
      {products.map((product) => (
        <div key={product}>
          <Input
            name={values.products}
            value={values.products}
            checked={values.products}
            onChange={({ target }) => setFieldValue("products", target.value)}
          />
        </div>
      ))}
      <button type="submit">Submit</button>
  </form>

Answer 1

values.products 是您的值的数组，因此将它作为您的名称或值没有意义。相反，您需要从数组中挑选出与您的特定复选框相关的特定值。

      {products.map((product, index) => (
         <div key={product}>
           <p>{product}</p>
           <Input
             name={product}
             value={values.products[index]}
             checked={values.products[index]}
             onChange={({ target }) => setFieldValue(`products.${index}`,!values.products[index])
        }
      />
          </div>
     ))}

Working Sandbox

Answer 2

当您选中一个复选框时，您将获得该值并检查该值是否已经存在于产品列表中，如果不存在，那么您应该添加该值（这将是您的检查部分），否则您可以从产品中筛选值（这将是您的未选中项）。

 <Checkbox
            name="products"
            value={product}
            checked={values.products.includes(product)}
            onChange={({ target }) => {
              let updatedProducts;
              if (values.products.includes(product)) {
                updatedProducts = values.products.filter(
                  (product) => product !== target.value
                );
              } else {
                updatedProducts = [...values.products, target.value];
              }
              setFieldValue("products", updatedProducts);
            }}
          />

工作沙盒

Sandbox

为什么我的复选框在 ReactJS 中取消选中后不返回

Why My Checkboxes Doesn't Check Back After Uncheck in ReactJS

ecmascript-6

reactjs

formik

react-hooks