Javascript 访问绑定到基础类的DOM节点和函数

我在一个对象中定义了一个回调函数，我想在单击该项时访问DOM节点，但我也想访问我的底层类的函数。 我不知道这是否有意义，这里有一些代码来证明我的观点：

class App extends Component{

   state = {
     nodeColor: ''
   }

   componentDidMount(){
        this.options = {
          eventClick: function(){
            console.log(this);
            //processDOMnode(this);
          }
        }
   }

   processDOMnode = (node) => {
     console.log(node);
     this.setState({ nodeColor: node.color });
   }

}

这些节点是由第三方库生成的，因此如果不在

eventClick

回调中使用访问

this

，我就无法直接获取被单击元素的引用-但是正如我所说，我想访问

setState

之类的方法，而且由于范围限制，我无法在

eventClick

中进行访问

我错过了一些基本的东西吗

---

Codesandbox链接：

您可以使用

eventClick:function（event）

并将事件侦听器绑定到组件

this.options.eventClick.bind（this）

。然后，您可以使用类似这样的

event.target

来访问节点

下面是一个完整的示例：

class App extends Component{

   state = {
     nodeColor: ''
   }

   componentDidMount(){
        this.options = {
          eventClick: function(event){
            this.processDOMnode(event.target);
          }
        }
   }

   processDOMnode = (node) => {
     this.setState({ nodeColor: node.color });
   }

   render() {
       return <button onClick={this.options.eventClick.bind(this)}>Click Me</button>
   }
}

类应用程序扩展组件{
状态={
节点颜色：“”
}
componentDidMount（）{
此选项={
事件单击：函数（事件）{
this.processDOMnode（event.target）；
}
}
}
processDOMnode=（节点）=>{
this.setState（{nodeColor:node.color}）；
}
render（）{
返回单击我
}
}

Hmm，几乎-问题是我无法通过使用

bind（这个

）来控制onClick。我使用库添加了一个codesandbox链接：@John您可以使用如下方式将组件绑定到函数：

eventClick:（函数（事件）{….}）.bind（this）

，如果使用命名函数而不是匿名函数，那么它可能更可读function@John似乎传递给

eventClick

的事件不是实际的click事件，您可以这样做，omg，它成功了，非常感谢！！真不敢相信我之前没有这么做。关于

这个

我想有一些误解