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

Question

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

我尝试了以下操作，但没有成功

import React, { Component } from 'react'

export default class RefsDemo extends Component {
  constructor(props) {
    super(props)

    this.inputRef=React.createRef();
    this.buttonRef=React.createRef();
  }

  componentDidMount()
  {
      console.log(this.buttonRef);
      this.buttonRef.current.onClick=()=>this.abchandle()
  }

  abchandle()
  {
      alert('hi');
  }

    render() {
    return (
      <div>
        <button ref={this.buttonRef} >click</button>
      </div>
    )
  }
}

Answer 1

this.buttonRef.current 是一个 DOM 节点，而不是 React 组件，因此要定义 on click 处理程序，您应该定义 onclick (注意小写) c) 改为:this.buttonRef.current.onclick=()=>this.abchandle()

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