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

Question

目前我正在 Udemy 上参加关于 React 的类(class)。

现在的类(class)是关于传递方法引用。所以基本上讲师将方法引用作为 Prop 传递到 App.js 的渲染方法内的 Person 标签中。在 Person 组件中，单击按钮时会执行 switchNameHandler，在修改输入文本字段时会执行 nameChangedHandler。

因此，类(class)讲师使用了 .bind() 方法。我已经研究过 bind() 方法的作用。但在当前示例中，我有两个问题:

1. 当前示例中的两个 this 关键字指的是什么(App.js 中的第二个 Person 标签 => 点击的值)？据我了解代码，他使用 this.switchNameHandler 获取类的当前方法并将其再次绑定(bind)到当前类(我知道这没有意义)？这两个处理程序方法是类的一部分，对我来说没有意义，因为您通常会将类外部的匿名函数绑定(bind)到对象。

2. 为什么讲师(在第二个 Person 标记中)让我们在 switchNameHandler 中使用 bind 方法，而不是在 nameChangedHandler 中？

App.js

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person'

class App extends Component {

  state = {
    persons: [
      { name: 'Peter', age: 20 },
      { name: 'Manu', age: 28 },
      { name: 'Stephanie', age: 24 }
    ],
    otherState: 'some other value'
  }

  switchNameHandler = (newName) => {
    //console.log('Was clicked!');
    this.setState({
      persons: [
        { name: newName, age: 20 },
        { name: 'Manu', age: 5 },
        { name: 'Stephanie', age: 30 }
      ]
    })
  }

  nameChangedHandler = (event) => {
    this.setState({
      persons: [
        { name: 'Max', age: 20 },
        { name: event.target.value, age: 5 },
        { name: 'Stephanie', age: 30 }
      ]
    })
  }

  render() {
    return (
      <div className="App">
        <h1>Hi, I'm a React App</h1>
        <button onClick={() => this.switchNameHandler('Maximilian!!!!!')}>Switch Name</button>
        <Person
          name={this.state.persons[0].name}
          age={this.state.persons[0].age}></Person>
        <Person
          name={this.state.persons[1].name}
          age={this.state.persons[1].age}
          click={this.switchNameHandler.bind(this, 'Max!')}
          changed={this.nameChangedHandler}>My hobbies: Racing</Person>
        <Person
          name={this.state.persons[2].name}
          age={this.state.persons[2].age}></Person>
      </div>
    );
  }
}

export default App;

Person.js

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;

React 文档的少量补充:我现在正在阅读 React 文档 ( https://reactjs.org/docs/faq-functions.html )，其中有一行:

如果您需要在处理程序中访问父组件，您还需要将函数绑定(bind)到组件实例(见下文)。

在渲染中绑定(bind):(来自 react 站点的代码)

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

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

Answer 1

如果您不绑定(bind)该函数而只是作为参数传递，例如:

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

你会像上面那样定义函数。当您尝试访问 App 实例时，您将得到一个未定义的:

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

但在你的例子中 switchNameHandler 是一个箭头函数。根据MDN arrow function文档

Until arrow functions, every new function defined its own this value (based on how function was called, a new object in the case of a constructor, undefined in strict mode function calls, the base object if the function is called as an "object method", etc.)

但既然知道了，为什么还要绑定(bind)函数呢？因为:

1. 您需要保留上下文(App 的this)
2. 传递一个附加参数('Max!')

回答第二个问题:nameChangedHandler 不需要绑定(bind)，因为它是一个箭头函数，它在创建它的地方获取上下文。