我在对象中定义了一个回调函数,我想在单击该项目时访问 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
最佳答案
您可以使用 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>
}
}
关于javascript - 访问绑定(bind)到底层类的 DOM 节点和函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51347624/