自定义RHFAutocomplete组件内部onChange失效，父组件正常求助

你的RHFAutocomplete组件中，Autocomplete的props传递顺序导致了内部onChange被覆盖：

1. 你先传递了{...field}，接着定义了内部的onChange，最后又传递了{...other}
2. 父组件传入的onChange属于other对象的属性，由于JSX中后传递的同名props会覆盖先传递的，所以父组件的onChange直接替换了你内部定义的版本，导致console.log('in')无法执行。

另外需要注意：React Hook Form的Controller提供的field对象本身就包含onChange，用于同步表单状态，直接覆盖它可能导致表单状态更新异常。

方案1：合并父子组件的onChange逻辑，保留表单同步 #

单独提取父组件传入的onChange，在内部逻辑执行后调用它，同时保留field的onChange以同步表单状态：

export default function RHFAutocomplete({ name, label, helperText, onChange: parentOnChange, ...other }) {
  const { control, setValue } = useFormContext();
  return (
    <Controller
      name={name}
      control={control}
      render={({ field: { onChange: fieldOnChange, ...restField }, fieldState: { error } }) => (
        <Autocomplete
          {...restField}
          {...other}
          onChange={(event, newValue) => {
            console.log('in');
            // 执行React Hook Form的表单同步逻辑
            fieldOnChange(newValue);
            // 你的自定义setValue逻辑
            setValue(name, newValue, { shouldValidate: true });
            // 调用父组件的onChange
            if (parentOnChange) {
              parentOnChange(event, newValue);
            }
          }}
        />
      )}
    />
  );
}

方案2：简化逻辑（若父组件仅需同步表单） #

如果父组件的onChange只是为了更新表单值，完全可以去掉父组件的手动setValue，让子组件统一处理：
父组件代码修改：

<RHFAutocomplete
  onChange={(event, newValue) => {
    if (newValue) {
      console.log('out');
    }
  }}
/>

子组件保持方案1的代码即可，这样父子组件的onChange都会按顺序触发。

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