React中如何在onChange同时调用父组件函数与子组件状态更新函数

我有一个父组件Fruits和子组件RadioBtnGroup，想要在子组件的onChange事件中，既执行父组件传递过来的radioBtnChangeHandler函数，又调用子组件内部的setAriaValue来更新自身状态，请问该怎么实现？

父组件代码 #

export function Fruits() {
  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    alert(e.target.value);
  };

  return (
    <div>
      <RadioBtnGroup
        options={FruitsOptions}
        name="Fruits"
        label="Choose Fruit:"
        radioBtnChangeHandler={onChangeHandler}
      />
    </div>
  );
}

原分子组件代码 #

export function RadioBtnGroup({
  ...
}: React.HTMLAttributes<HTMLInputElement> {
  
  const [ariaValue, setAriaValue] = useState("");

  return (
    <>
      {label && (
        <h3 id="fruits-radio-group">{label}</h3>
      )}
      <div
        role="radiogroup"
        aria-labelledby="fruits-radio-group"
        aria-activedescendant={ariaValue}
        tabIndex={0}
      >
        {options?.map((option, index) => (
          <RadioBtn
            key={`radioOpt-${option.value}`}
            onChange={() => {
              radioBtnChangeHandler; 
              setAriaValue(e.currentTarget.value);
            }} //////////
            id={`radioOpt-${option.value}`}
            label={option.label}
            value={option.value}
          />
        ))}
      </div>
    </>
  );
}

问题分析 #

你的子组件代码里存在两个关键问题：

1. 只是引用了radioBtnChangeHandler函数，但没有实际调用它
2. onChange回调里没有接收事件对象e，导致无法向父组件传递事件参数，也没法用e.currentTarget.value更新自身状态

修正方案 #

只需要调整子组件的onChange回调逻辑，同时正确接收事件参数并调用两个函数即可，另外还需要修正子组件的Props类型声明（原类型不符合实际传入的参数）：

// 先定义子组件的Props类型
type RadioBtnGroupProps = {
  options: Array<{ label: string; value: string }>;
  name: string;
  label?: string;
  radioBtnChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
};

export function RadioBtnGroup({
  options,
  label,
  radioBtnChangeHandler
}: RadioBtnGroupProps) {
  
  const [ariaValue, setAriaValue] = useState("");

  return (
    <>
      {label && (
        <h3 id="fruits-radio-group">{label}</h3>
      )}
      <div
        role="radiogroup"
        aria-labelledby="fruits-radio-group"
        aria-activedescendant={ariaValue}
        tabIndex={0}
      >
        {options?.map((option) => (
          <RadioBtn
            key={`radioOpt-${option.value}`}
            // 接收事件参数e，依次调用父组件函数和自身状态更新
            onChange={(e) => {
              // 先调用父组件传递的处理函数，传入事件对象
              radioBtnChangeHandler(e);
              // 再更新子组件自身的状态
              setAriaValue(e.currentTarget.value);
            }}
            id={`radioOpt-${option.value}`}
            label={option.label}
            value={option.value}
          />
        ))}
      </div>
    </>
  );
}

关键说明 #

• 确保onChange回调接收事件参数e，这样才能把事件信息传递给父组件的处理函数，同时拿到当前选中的值更新自身状态
• 调用父组件函数时记得加上括号并传入参数，否则函数不会执行
• 自定义Props类型可以让代码更严谨，避免类型错误

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