Javascript React-在组件之间传递方法引用

目前我正在参加一个关于React的课程

现在的选择是关于传递方法引用。因此，基本上，讲师在App.js的render方法内的Person标记中将方法引用作为道具传递。在Person组件中，单击按钮时执行switchNameHandler，修改输入文本字段时执行nameChangedHandler

因此，课程讲师使用.bind（）方法。我已经研究了bind（）方法的作用。但在本例中，我有两个问题：

在当前示例中，这两个关键字指的是什么（App.js=>value of click中的第二人称标记）？就我所理解的代码而言，他使用this.switchNameHandler获取类的当前方法，并将其再次绑定到当前类（我知道这没有意义）？这两个处理程序方法是类的一部分，对我来说没有意义，因为您通常将类之外的匿名函数绑定到对象

为什么讲师（在第二人称标记中）让我们在switchNameHandler中使用bind方法，而不是在nameChangedHandler中

App.js

import React，{Component}来自'React'；
导入“/App.css”；
从“./人/人”导入人
类应用程序扩展组件{
状态={
人员：[
{姓名：'Peter'，年龄：20}，
{姓名：'Manu'，年龄：28}，
{姓名：'Stephanie'，年龄：24}
],
otherState:“其他值”
}
switchNameHandler=（新名称）=>{
//console.log（'Was clicked！'）；
这是我的国家({
人员：[
{姓名：newName，年龄：20}，
{姓名：'Manu'，年龄：5}，
{姓名：'Stephanie'，年龄：30}
]
})
}
nameChangedHandler=（事件）=>{
这是我的国家({
人员：[
{姓名：'Max'，年龄：20}，
{name:event.target.value，年龄：5}，
{姓名：'Stephanie'，年龄：30}
]
})
}
render（）{
返回(
嗨，我是React应用程序
这个.switchNameHandler（'Maximilian！！！！！'）}>开关名称
我的爱好：赛车
);
}
}
导出默认应用程序；

Person.js

从“React”导入React；
导入“/Person.css”；
const person=（道具）=>{
返回(
我是{props.name}，我是{props.age}岁
{props.children}

)
};
出口违约人；

添加少量react文档： 我现在正在阅读react文档（），这里有一行：

如果需要访问处理程序中的父组件，还需要将函数绑定到组件实例（请参见下文）

渲染中绑定：（来自react站点的代码）

类Foo扩展组件{
handleClick（）{
log（'单击发生'）；
}
render（）{
返回点击我；
}
}

在本例中，处理程序方法不在父组件中，而是在同一组件中。在这种情况下，我也必须理解一些错误。

第一种情况（

click={this.switchNameHandler.bind（this'Max！'）}

）就是这样，您不需要声明额外的函数来将参数传递给函数。最后，最终结果与上面的示例相同（

onClick={（）=>this.switchNameHandler（'Maximilian！！！！！'）}

），不同之处在于，在第一种情况下，它创建一个arrow函数（）来调用带有自定义参数的方法，而第二种情况下，它将参数与

this

（创建一个新的函数对象）绑定在一起

---

第二种情况（

changed={this.nameChangedHandler}

），因为（该函数被声明为一个箭头函数），当作为prop传递时，您不需要再次绑定它。

如果您不绑定该函数，只需像以下那样作为参数传递：

<Person
  name={this.state.persons[1].name}
  age={this.state.persons[1].age}
  click={this.switchNameHandler}
  changed={this.nameChangedHandler}>My hobbies: Racing</Person>

但是在您的例子中，

switchNameHandler

是一个箭头函数。根据文件

在arrow函数之前，每个新函数都定义了自己的该值（基于函数的调用方式、构造函数中的新对象、严格模式函数调用中的未定义、函数作为“对象方法”调用时的基对象等）

但即使知道这一点，为什么还要绑定函数呢？因为：

您需要保留上下文（应用程序的

此

）

传递附加参数（

'Max！'

）

---

回答第二个问题：

nameChangedHandler

不需要绑定，因为它是一个arrow函数，它接受创建它的上下文。

有两种函数：

使用函数关键字声明的函数

此类函数有一个名为的变量，该变量表示调用对象的上下文，可以隐式或显式传递

const obj={
测试：函数（）{
console.log（这个）
}
}
obj.test（）；
test（）；
const bindedTest=obj.test.bind（obj）；
bindetest（）在{this.switchNameHandler}中的this是否引用Person标记，因为它在其中？如果不是，那么{this.switchNameHandler}中的this是指什么？我是否正确理解，arrow函数自动将this上下文设置为应用程序，因为它在类中？@TNII
{this.switchNameHandler}
指的是应用程序
this
。函数只是一个prop（参数），用户仍然想知道：click={this.switchNameHandler.bind（this，'Max！'）}为什么要将类的方法再次绑定到类本身（两个“this”关键字都指向应用程序，对吗？）。再次绑定此方法是因为
bind
创建了一个新函数，该函数在调用时将其This关键字设置为提供的值，并设置了参数。如果您执行类似于此.switchNameHandler（'Max！'）

的操作，则它是n

import React from 'react';
import './Person.css';

const person = (props) => {
    return (
        <div className="Person">
            <p onClick={props.click}>I'm { props.name } and I am { props.age } years old!</p>
            <p>{props.children}</p>
            <input type="text" onChange={props.changed} value={props.name} />
        </div>

    )
};

export default person;

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
  }
}

<Person
  name={this.state.persons[1].name}
  age={this.state.persons[1].age}
  click={this.switchNameHandler}
  changed={this.nameChangedHandler}>My hobbies: Racing</Person>

switchNameHandler(newName){
    console.log(this);// undefined
}