React父组件函数在子组件绑定后setState上下文不符合预期的原因咨询

嘿，这个问题其实是JavaScript里this绑定机制和React组件方法处理的典型场景，我来帮你理清楚前因后果～

核心原因：箭头函数的词法绑定 + React方法传递的特性 #

你说的this始终指向FooClosure（父组件），大概率是因为你在父组件里用箭头函数定义了handleChange方法！

箭头函数和普通函数的this绑定规则完全不同：

• 普通函数的this是在调用时决定的，取决于调用它的上下文；
• 箭头函数不会绑定自己的this，它会直接捕获定义时所在词法环境的this——也就是父组件FooClosure的实例。

举个直观的例子：

class FooClosure extends React.Component {
  // 箭头函数定义，this在定义时就绑定到FooClosure实例
  handleChange = (event) => {
    this.setState({ value: event.target.value }); // 这里的this永远是FooClosure
  }

  render() {
    // 把方法传给子组件
    return <Child onChange={this.handleChange} />;
  }
}

class Child extends React.Component {
  render() {
    // 哪怕你在这里尝试重新绑定，也没用！
    return <input onChange={this.props.onChange.bind(this)} />;
  }
}

箭头函数的this是“静态”的，一旦定义就被固定，后续的bind/call/apply都没法修改它的指向——这就是为什么你觉得不管怎么绑，this都停在父组件的原因。

为什么你会误以为this应该指向子组件？ #

可能是混淆了两个概念：

1. 如果是未绑定的普通函数，在子组件的事件回调里调用时，this默认会指向触发事件的DOM元素（比如<input>），而非子组件实例；
2. 只有当你在子组件里手动把函数绑定到子组件的this（比如this.props.onChange.bind(this)），且父组件的函数本身没有被提前绑定时，this才会指向子组件。但如果父组件已经用箭头函数或bind固定了this，子组件的绑定就无效了。

怎么优雅解决？ #

其实你完全不需要额外传self参数，根据你的需求场景选下面的方案就行：

• 如果状态本来就该放在父组件：那现在的this指向父组件是合理的，不需要改动。如果需要子组件的信息，直接通过参数传递就行：

  // 子组件调用时传值
  this.props.onChange(event, this.childStateValue);
  
  // 父组件方法接收
  handleChange = (event, childValue) => {
    this.setState({ parentValue: childValue });
  }
  

• 如果确实需要方法里的this指向子组件：那应该把方法定义在子组件内部，或者在子组件里封装一层：

  class Child extends React.Component {
    // 子组件自己的方法，this指向子组件
    handleLocalChange = (event) => {
      // 这里可以用this操作子组件的状态/属性
      this.setState({ localValue: event.target.value });
      // 再调用父组件传过来的方法
      this.props.onChange(event);
    }
  
    render() {
      return <input onChange={this.handleLocalChange} />;
    }
  }
  

内容的提问来源于stack exchange，提问作者John Detlefs