Question

我是新来反应js的人。我正在尝试理解一段代码。

在父组件中：

< childComp onSearchChange={this.someParentMethod} />

在子组件中：

interface childCompProps {
onSearchChange: (
    string1: string,
    string2: string) => void;
}

export class childComp extends React.Component<childCompProps,{}> {
constructor(props: childCompProps) {
    super(props);
}

render() {
   return (
           <Button
                type="primary"
                onClick={() => this.props.onSearchChange(
                    this.state.string1,
                    this.state.string2)}>
                Search
            </Button>
     )
  }

}

在这种情况下，呼叫流程如何工作？父方法何时调用？在onClick期间到底传递了什么？

Answer 1

在您的子组件中，您已经声明它将具有包含两个字符串的状态，但是它们尚未初始化。

onSearchChange道具的父组件处理程序将接收您从子组件传递给它的任何信息。

按钮中的onClick处理程序将接收代表事件的值。在您的代码中，由于您正在调用通过props接收的处理程序，因此该处理程序具有的唯一上下文就是您作为参数传递的内容，仅此而已。

回答您的最后一个问题，将在事件触发时（如预期的那样，单击按钮时）准确地调用父组件上的处理程序。

Answer 2

请考虑以下c＃（oops逻辑）示例，该示例与上述情形类似。

我要做什么

具有void方法的接口

interface IChildComponent
{
    public void OnSearchChange(string string1, string string2);
}

创建一个类A并将该接口继承给该类



在主方法实例中调用接口的方法

//my component
class A : IChildComponent
{
    public void OnSearchChange(string string1, string string2)
    {
    }
}

public class Program
{
    static void Main()
    {
        A instaceA = new A();  //consider this as component

        //this is basically a button click in your component which will be a method of IChildComponent Interface
        instaceA.OnSearchChange("hello", "world");
    }
}

它与您的组件有何相似之处？

您正在创建一个界面

interface childCompProps {
onSearchChange: (
    string1: string,
    string2: string) => void;
}

您正在创建组件（基本上是一个类）

 class childComp

并通过extends关键字继承接口

export class childComp extends React.Component<childCompProps,{}>

因此，在childComp类中，您将接口方法作为可以直接访问的属性，因为它使用了继承结构。类似地，在我的示例中，我创建了该类的实例，并使用了接口方法的抽象声明，即{{1 }}

所以当你做

instaceA.OnSearchChange("hello", "world");

由于继承，基本上是接口onClick={() => this.props.onSearchChange(中作为该类属性的方法。

希望这很有道理。

了解React JS代码

2 个答案: