React:从外部父组件传递函数

Question

我目前正在尝试了解如何访问TypeScript中的子组件中的函数，该子组件在父组件中定义。

组件的结构如下：

1. 父组件(包括getDatafromForm函数(

2. 两个同级子组件(Child1、Child2(

3. 其中一个孩子(Child1(调用一个组件，也就是Child1的孩子。这是一个表单，看起来像这样：

4. 我想要实现的是调用从表单中获取数据，该表单在3中生成。通过从Child1调用父组件(getDataFromForm(。

   import React from "react";
   import { useForm, SubmitHandler } from "react-hook-form";
   type FormInputs = {
   min: number;
   max: number;
   };
   // const onSubmit: SubmitHandler<FormInputs> = data => 
   console.log(data);
   export default function ChildofChild1(props: { getDataFromForm: (arg0: any) => void; }) {
   const { register, formState: { errors }, handleSubmit, getValues } = useForm<FormInputs>({
   defaultValues: {
   min: 250,
   max: 8000,
   }
   });
   const onSubmit = (dataFreq: any) => {
   props.getDataFromForm(dataFreq) //Call the function in the parent component
   }
   
   return (
   <form onSubmit={handleSubmit(onSubmit)}>
   <input {...register("min", { required: true })} />
   {errors.min && "Only numbers are allowed"}
   <input {...register("max", { required: true })} />
   {errors.max && "Only numbers are allowed"}
   <input type="submit" />
   </form>
   );
   }
   

我从Child1调用此组件，如下所述：

import React from "react";
import ChildofChild1 from "./ChildChild1"
type Props = {
}
type State = {
}
export default class Child1 extends React.Component<Props, State>{
// getDataFromForm = (data: any) => {
//   this.setState({data: data })
// };
render() {
return (
<ChildofChild1 getDataFromForm={this.props.getDataFromForm}/>
);
}
}

正在进行的操作是在组件中调用getDataFromForm，如注释块中所示。这里的问题是，我希望从ChildofChild1收到的信息可以在可能的组件Child2中获得。这就是我创建带有注释块的父组件的原因。这个父组件函数如下所示：

export function getDataFromForm(data: any) {

this.setState({data: data });

return data;
}

在Child1组件的同级组件中，也就是Child2，我想用调用这个函数

var data = getDataFromForm(data);

我想念什么？我想过绑定父函数，但函数没有被调用。

Answer 1

不确定我是否正确理解你的问题。也许具有更好组件名称的示例会有所帮助。如果我的理解正确，请告诉我！

1. 您有一个Parent组件和一个Child组件
2. Parent组件内部定义了一个函数：getDataFromForm
3. 您正在尝试访问Child组件中的该函数。如果这是正确的，请检查以下代码(否则，请修改您的问题(

// Parent.tsx
type Props = {}
type State = {}
class Parent extends React.Component<Props, State> {
public getDataFromForm = () => {
this.setState({ data: data });
}

public render(): JSX.Element {
return <Child getDataFromForm={this.getDataFromForm} />;
}
}

// Child.tsx
type Props = {
// This method will be available in props for the child component
getDataFromForm: () => void
}
class Child extends React.Component<Props, State> {  
public render(): JSX.Element {
this.props.getDataFromForm(); // <== You can call the parent's method through props
return <>... </>; // Your JSX here
}
}