React中如何实现点击包裹Checkbox的整个div触发选中功能

实现方案 #

有两种常用的稳定实现方式：

方案1：使用原生标签（推荐，无额外JS逻辑） #

利用HTML原生<label>标签关联表单元素后，点击标签自动触发对应表单元素交互的特性，直接把外层的div替换为label即可，不需要额外编写点击事件逻辑，性能最优。
改造后代码如下：

<form onSubmit={handleSubmit}>
  {products.map((product) => (
    <label key={product} style={{ cursor: "pointer", display: "block" }}>
      {product}
      <Checkbox
        name="products"
        value={product}
        checked={values.products.includes(product)}
        onChange={({ target }) => {
          let updatedProducts;
          if (values.products.includes(product)) {
            updatedProducts = values.products.filter(
              (item) => item !== target.value
            );
          } else {
            updatedProducts = [...values.products, target.value];
          }
          setFieldValue("products", updatedProducts);
        }}
      />
    </label>
  ))}
  <button type="submit">Submit</button>
</form>

注意：如果你的自定义Checkbox组件内部没有将原生input包裹在组件根节点下，需要给内部的input添加id属性，同时给外层label添加对应htmlFor={id}属性完成关联。

方案2：给外层div绑定点击事件 #

如果必须保留外层div结构，可以把选择逻辑抽离为公共函数，同时给div绑定点击事件触发逻辑，添加事件冒泡阻止避免点击Checkbox时重复触发：
改造后代码如下：

// 抽离共用的产品选择切换逻辑
const toggleProductSelect = (product) => {
  let updatedProducts;
  if (values.products.includes(product)) {
    updatedProducts = values.products.filter(
      (item) => item !== product
    );
  } else {
    updatedProducts = [...values.products, product];
  }
  setFieldValue("products", updatedProducts);
}

<form onSubmit={handleSubmit}>
  {products.map((product) => (
    <div 
      key={product} 
      style={{ cursor: "pointer" }}
      onClick={() => toggleProductSelect(product)}
    >
      {product}
      <Checkbox
        name="products"
        value={product}
        checked={values.products.includes(product)}
        onChange={(e) => {
          e.stopPropagation(); // 阻止事件冒泡到外层div，避免重复触发切换
          toggleProductSelect(product);
        }}
      />
    </div>
  ))}
  <button type="submit">Submit</button>
</form>

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