在 React 中使用 react-hook-form 与子组件中的 Typescript

Question

我正在使用 react-hook-form 库的一个基本示例，即使在查阅了纪录片之后，我也不知道如何将数据从表单传递到另一个组件。这是我的表单组件：

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

type FormInputs = {
    minimalFrequency: number;
    maximialFrequency: number;
  };

// const onSubmit: SubmitHandler<FormInputs> = data => console.log(data);

export default function BasicUsage() {
  const { register, formState: { errors }, handleSubmit, getValues } = useForm<FormInputs>({
    defaultValues: {
        min: 250,
        max: 8000,
      }
  });
  const onSubmit = (data: any) => {
    console.log(data);
  }


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("minimalFrequency", { required: true })} />
      {errors.minimalFrequency && "Only numbers are allowed"}
      <input {...register("maximialFrequency", { required: true })} />
      {errors.maximialFrequency && "Only numbers are allowed"}
      <input type="submit" />
    </form>
  );
}

我想在用户按下“提交”按钮后以给定数据对象的形式获取最小值和最大值，但我无法理解它是如何工作的。

我的主要组件是一个相当大的 class 组件，我读到它可能无法工作，因为 react-hook-form 需要一个功能组件。如果为真，有没有办法仍然以某种方式使用我的 class 组件？

更新：添加了父组件

import { useState } from "react";
import React from "react";
import BasicUsage from "./BasicUsage"

type Props = {

}

type State = {
  dataFreq: object;
}



export default class Parent extends React.Component<Props, State>{
    private timer: any;

constructor(props: Props) {
  super(props);
  this.state = {

    dataFreq: {
      minimalFrequency: 250,
      maximialFrequency: 8000
  }
  };
}

getDataFromForm = (dataFreq: any) => {
  this.setState({dataFreq: dataFreq })
  console.log(dataFreq)

};
render() {
  const minFreq  = this.state.dataFreq;

  console.log("This is a this dataFreq", this.state.dataFreq);
  console.log("This is a this minimalFrequency", minFreq);

  return (
    <div>
      <BasicUsage getDataFromForm={this.getDataFromForm}/>
    </div>
  );
}
}

Answer 1

您仍然可以将 class 组件用作父组件。

如果我假设您想在主组件中使用表单中的数据，并且主组件是父组件，那么您可以在主组件中定义一个函数，例如

getDataFromForm(data){
this.setState({data: data })
}

然后将此函数传递给 BasicUsage 组件

//In your main components render function, or wherever you are using the BasicUsage component
  <BasicUsage
    //other props you want to send into BasicUsage from the main component
    getDataFromForm={getDataFromForm}
  />

现在，在 BasicUsage 组件的 onSubmit 函数中，您可以调用作为 prop 传递的函数

     const onSubmit = (data: any) => {
        //Do something with your data if you want to change format or process it somehow; 
//in this case you should probably make a new variable and pass the new variable into getDataFromForm
        props.getDataFromForm(data) //Call the function in the parent component
      }

如果您在同级组件而不是父组件中使用表单数据，您可以在公共父组件中创建 getDataFromForm 函数并将该函数传递给 BasicUsage 组件和将 state.data 值放入要访问数据的同级组件中

在 React 中使用 react-hook-form 与子组件中的 Typescript

Using react-hook-form in React with Typescript in child component

typescript

reactjs

react-hooks

react-hook-form