Question

我正在学习React js，并且想知道，可以通过引用组件来添加点击处理程序。

我尝试关注，但没有成功

def __iter__(self):
    self.cur_idx += 1
    return self[self.cur_idx]

Answer 1

this.buttonRef.current是DOM节点，不是React组件，因此要定义点击处理程序，应定义onclick（注意小写的c）： this.buttonRef.current.onclick=()=>this.abchandle()

https://codepen.io/liboul/pen/jRJmqZ

Answer 2

我相信我们需要使用ref来选择节点，然后添加一个事件列表器，例如-：

我们需要导入“ react-dom”以使其起作用

import ReactDOM from 'react-dom'

然后添加这段代码-：

componentDidMount()
  {
      let domNode = ReactDOM.findDOMNode(this.buttonRef.current);
      if(domNode) {
        domNode.addEventListener('click', () => console.log('click'));
      }
  }

希望它会有所帮助。...顺便说一句，当我们可以在JSX中执行类似的操作时，为什么需要附加点击处理程序

<button onClick={() => console.log('click')} >Click</button>

可以看到此

https://stackblitz.com/edit/react-zakgqb?file=Hello.js

Answer 3

您要尝试执行的操作可以通过onClick属性实现，这是实现此任务的最佳实践。

因此在button元素内部只需添加一个onClick属性，如下所示：

<button onClick={this.abchandle}>click</button>

没有理由为此添加事件侦听器，这不是反应方式。

如何通过引用组件添加Click Handler

3 个答案: