Javascript React子回调绑定this，而不重写原始this 类父级扩展React.Component{ 建造师（道具）{ 超级（道具） this.handleChildOnClick=this.handleChildOnClick.bind（this） } handleChildOnClick（）{ /*我想在这里做一些既需要孩子又需要父母的事情。 *但“this”指向Parent，因为我将其绑定到Parent的构造函数中。 */ } render（）{ 返回( ) } }

在

handleChildOnClick

回调中，我想调用一个孩子的方法来检索一些数据并相应地更新家长的状态

如果我将父对象的

this

绑定到

handleChildOnClick

在父对象构造函数中，那么我将丢失对子对象的引用，因此无法调用子对象的方法。但是如果我没有绑定它，那么我就无法在

handleChildOnClick

中设置父级的状态

是否有一种方法可以绑定

此

，同时不覆盖原始

此

编辑：
我的子组件来自库，因此无法修改它

编辑：

---

我在用图书馆。子组件是，我想在启动GoogleMap的

onBoundsChange

回调时，将GoogleMap的新视图边界存储在父组件的状态中（通过在GoogleMap上调用

getBounds（）

）。

您需要从其道具调用子组件中的处理程序并更新父组件的状态：

class Parent extends React.Component {

  handleChildOnClick = (data) => {
    /* I would like to do something here that requires both Child and Parent.
     * But 'this' points to Parent because I binded it in Parent's constructor.
     */
  }

  render() {
    return(
    <Child
      handleChildOnClick={this.handleChildOnClick}
    />)
  }

}

类父级扩展React.Component{
handleChildOnClick=（数据）=>{
/*我想在这里做一些既需要孩子又需要父母的事情。
*但“this”指向Parent，因为我将其绑定到Parent的构造函数中。
*/
}
render（）{
返回(
)
}
}

然后在子组件中：

class Child extends React.Component {

      handleChildOnClick = () => {
        // you can even send data to parent click handler
        this.props.handleChildOnClick(data); // pass any arguments 
      }

      render() {
        return(
        <button
          onClick={this.handleChildOnClick}
        />)
      }

    }

类子级扩展React.Component{
handleChildOnClick=（）=>{
//您甚至可以将数据发送到父单击处理程序
this.props.handleChildOnClick（数据）；//传递任何参数
}
render（）{
返回(
)
}
}

这就是它在react的pne方式绑定中的工作方式。

---

我希望这将是有益的

所需的

此

不被视为

儿童

上下文。该函数作为回调传递，它提供了一些动态

this

。如果

这个

是

子组件实例，那只是巧合

这个问题特定于遗留的或设计糟糕的库，这些库不支持现代JS OOP，并且依赖于任意的动态
this
，而不是将所有必要的数据作为函数参数传递。一个著名的例子是D3库

一个函数不能有两个
此
。一种流行的解决方法是将
self=this
技巧与常规（非箭头）功能结合使用。但是，对于类语法来说，这变得很笨拙，因为它不能放在构造函数的外部：

class Parent extends React.Component {
  constructor(props) {
    super(props)

    const self = this;
    this.handleChildOnClick = function handleChildOnClick() {
      // `self` is Parent instance
      // `this` is dynamic context
    };
  }

  render() {
    return(
    <Child
      onClick={this.handleChildOnClick}
    />)
  }
}

谢谢你的解决方案。但是子组件来自一个库，所以我不能在它上面定义新函数。有没有一个解决方案不需要修改Child？那么为什么需要两个处理程序呢？您可以在父组件中声明child，也可以在子组件中声明child。您可以在帖子中更简短地说明您使用的库吗？最好写下您的handleChildOnClick（），这将有助于找出您的问题。最终，我在子组件中添加了一个。感谢您提供了另一种解决此问题的方法。不客气。是的，如果
此
是特定的子实例，则ref将起作用。我没有检查库是如何工作的，但在常规的单击处理程序中，第一个参数包含所有必要的数据，也可能是这样。您可以检查处理程序接收哪些参数。
function contextWrapper(fn) {
    const self = this;

    return function (...args) {
        return fn.call(self, this, ...args);
    }
}

class Parent extends React.Component {
  constructor(props) {
    super(props)

    this.handleChildOnClick = contextWrapper(this.handleChildOnClick.bind(this));
  }

  handleChildOnClick(context) {
      // `this` is Parent instance
      // `context` parameter is dynamic context
    }
  }

  render() {
    return(
    <Child
      onClick={this.handleChildOnClick}
    />)
  }
}