React中如何为Checkbox组件设置动态onChange事件处理程序？

1. 统一父组件传递的props名称 #

把父组件中传递给CheckboxFilter的不同过滤函数，统一用一个通用的props名称（比如onFilterChange）传递，让子组件无需区分具体是哪种过滤逻辑：

<legend>Brands</legend>
{brands.map((data) => (
  <>
    <CheckboxFilter
      key={data.id} {/* 修正：原代码用brands.id错误，需用当前循环项data的唯一id */}
      data={data}
      onFilterChange={filterByBrand}
    />
  </>
))}

<legend>Display</legend>
{displays.map((data) => (
  <>
    <CheckboxFilter
      key={data.id} {/* 同样修正key的取值 */}
      data={data}
      onFilterChange={filterByDisplay}
    />
  </>
))}

2. 修改子组件动态调用传入的函数 #

子组件CheckboxFilter不再硬编码调用filterByBrand，直接使用父组件传递的通用函数：

<fieldset>
  <div>
    <input
      type="checkbox"
      name={data}
      id={data}
      value={data}
      onChange={() => {
        props.onFilterChange(data); // 直接调用父组件传入的对应过滤函数
      }}
    />
    <label htmlFor={data}>{data}</label>
  </div>
</fieldset>

额外注意 #

• 若子组件是函数组件，需在参数中明确接收onFilterChange props：

  const CheckboxFilter = ({ data, onFilterChange }) => {
    // 组件逻辑
  };
  

• 原代码的key取值错误，brands是数组本身没有id属性，必须用循环项data的唯一标识作为key，否则会触发React的key警告。

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