在React+Typescript子组件中使用react-hook-form向父类组件传值咨询

你已经在父组件定义了接收数据的getDataFromForm方法，只需要调整子组件的两处问题即可跑通逻辑：

• 修正BasicUsage组件的defaultValues字段映射错误：当前定义的key是min/max，和register绑定的minimalFrequency/maximialFrequency不匹配，默认值不会生效
• 给BasicUsage声明props类型，提交时调用父组件传入的getDataFromForm方法传递数据

修改后的BasicUsage完整代码如下：

import { useForm, SubmitHandler } from "react-hook-form";

type FormInputs = {
  minimalFrequency: number;
  maximialFrequency: number;
};
// 声明组件props类型
type BasicUsageProps = {
  getDataFromForm: (data: FormInputs) => void
}

export default function BasicUsage({ getDataFromForm }: BasicUsageProps) {
  const { register, formState: { errors }, handleSubmit } = useForm<FormInputs>({
    defaultValues: {
      // 修正defaultValues的key和注册字段保持一致
      minimalFrequency: 250,
      maximialFrequency: 8000,
    }
  });
  const onSubmit: SubmitHandler<FormInputs> = (data) => {
    // 提交时直接调用父组件传入的方法传递数据
    getDataFromForm(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="number" {...register("minimalFrequency", { required: true })} />
      {errors.minimalFrequency && "必填项，仅允许输入数字"}
      <input type="number" {...register("maximialFrequency", { required: true })} />
      {errors.maximialFrequency && "必填项，仅允许输入数字"}
      <input type="submit" />
    </form>
  );
}

父组件可做两处小优化：

• 把State中dataFreq的类型从object改为具体的FormInputs类型，避免后续类型校验报错
• 你当前render中定义的minFreq是完整的频率对象，如需单独取最小频率，写法为const minFreq = this.state.dataFreq.minimalFrequency

你目前的拆分方案是改造成本最低的最优解：表单逻辑完全收敛在函数子组件中，原有大类组件不需要做任何改造，只需要处理子组件回传的表单数据即可。
如果确实需要在类组件内部直接使用react-hook-form的能力，可以用高阶组件封装hook逻辑后注入类组件，示例如下：

// 高阶组件封装react-hook-form逻辑
function withFormHook(WrappedComponent: React.ComponentType<any>) {
  return function(props: any) {
    const formMethods = useForm<FormInputs>({
      defaultValues: { minimalFrequency: 250, maximialFrequency: 8000 }
    })
    return <WrappedComponent {...props} formMethods={formMethods} />
  }
}

// 类组件使用封装后的能力
class MyClassComponent extends React.Component {
  render() {
    const { register, handleSubmit } = this.props.formMethods
    return <form onSubmit={handleSubmit(data => console.log(data))}>
      <input {...register('minimalFrequency')} />
      <input type="submit" />
    </form>
  }
}

// 导出包裹后的组件
export default withFormHook(MyClassComponent)

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