javascript - 访问绑定(bind)到底层类的 DOM 节点和函数

Question

我在对象中定义了一个回调函数，我想在单击该项目时访问 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 链接:https://codesandbox.io/s/0x03w3070n

Answer 1

您可以使用 eventClick: function(event) 并将事件监听器绑定(bind)到您的组件 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>
   }
}