javascript - React 事件处理程序 : Why parent this is not overwritten by child bind

Question

我在 youtube 上关注了 React JS Crash Course - 2019，但无法找到以下问题的答案。

为什么子组件的绑定(bind)调用不会覆盖父组件中的方法上下文。

可以在此处找到代码库 https://github.com/bradtraversy/react_crash_todo

但是为了简化问题，这里有一个小代码片段。

父级

class App extends Component {
  state = {
    todos: []
  }


  // Toggle Complete
  markComplete = (id) => {
    this.setState({ todos: this.state.todos.map(todo => {
      if(todo.id === id) {
        todo.completed = !todo.completed
      }
      return todo;
    }) });
  }

  render() {
    return (
        <TodoItem markComplete={this.markComplete}  />
    );
  }
}

child

export class TodoItem extends Component {

  render() {
    const { id, title } = this.props.todo;
    return (
        <input type="checkbox" onChange={this.props.markComplete.bind(this, id)} /> {' '}
    )
  }
}

根据我对bind的理解https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind我希望当调用标记 markComplete 时，“this”将是子上下文，但它仍然是父上下文。

  markComplete = (id) => {
    this.setState({ todos: this.state.todos.map(todo => {
    ^^^^ why it is not child
      if(todo.id === id) {
        todo.completed = !todo.completed
      }
      return todo;
    }) });
  }

我确实了解公共(public)类字段语法。

React 是否发挥了一些魔力？ https://github.com/facebook/react/blob/64e1921aab4f7ad7e2f345f392033ffe724e52e9/packages/events/EventPluginHub.js#L148

来自回答@Li357 https://stackoverflow.com/a/51759791/4322180

Answer 1

那是因为您使用的是箭头函数。箭头函数使用“词法 this”，它不是“调用者”。尝试像这样编写你的方法，然后绑定(bind)应该可以工作:

  markComplete(id) {
    this.setState({ todos: this.state.todos.map(todo => {
      if(todo.id === id) {
        todo.completed = !todo.completed
      }
      return todo;
    }) });
  }

词法:http://es6-features.org/#Lexicalthis

[编辑]

您还可以使用 function 将函数编写为“经典”函数:markComplete = function(id) {/*...*/}