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

Question

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

请在此处检查我的代码和框 单击此处

  <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>

标签： reactjsecmascript-6react-hooksformik

Answer 1

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

 <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);
            }}
          />

工作沙箱

沙盒