React类组件中如何为元素自定义onClick事件

原写法的问题 #

你原来的代码存在两个关键问题：

1. 在constructor中调用document.getElementById时，组件还未挂载到DOM，根本获取不到目标按钮，this.button会是null
2. 直接操作DOM绑定事件不符合React的数据流设计理念，容易引发状态与DOM不同步的问题

方法一：JSX内直接绑定事件（最推荐） #

在类组件中定义事件处理方法，然后在render的元素上直接通过onClick绑定，这是React的标准写法：

class Customers extends React.Component {
  constructor(props) {
    super(props);
    // 绑定this，避免事件触发时this指向丢失
    this.handleDeleteClick = this.handleDeleteClick.bind(this);
  }

  handleDeleteClick() {
    // 这里写点击后要执行的逻辑
    console.log("删除按钮被点击");
  }

  render() {
    return (
      <button id="GanttExport_delete" onClick={this.handleDeleteClick}>
        删除
      </button>
    );
  }
}

如果不想在constructor里手动绑定this，也可以用箭头函数定义方法（自动绑定当前组件的this）：

class Customers extends React.Component {
  handleDeleteClick = () => {
    console.log("删除按钮被点击");
  }

  render() {
    return (
      <button id="GanttExport_delete" onClick={this.handleDeleteClick}>
        删除
      </button>
    );
  }
}

方法二：使用React Refs绑定DOM事件（特殊场景用） #

如果必须通过DOM元素绑定事件（比如操作第三方库生成的元素），要用React的Refs，并且在组件挂载完成后再操作：

class Customers extends React.Component {
  constructor(props) {
    super(props);
    // 创建Ref对象
    this.deleteButtonRef = React.createRef();
  }

  componentDidMount() {
    // 组件挂载完成后，才能获取到真实DOM元素
    const button = this.deleteButtonRef.current;
    if (button) {
      button.addEventListener('click', this.handleDeleteClick);
    }
  }

  componentWillUnmount() {
    // 组件卸载前移除事件监听，避免内存泄漏
    const button = this.deleteButtonRef.current;
    if (button) {
      button.removeEventListener('click', this.handleDeleteClick);
    }
  }

  handleDeleteClick() {
    console.log("删除按钮被点击");
  }

  render() {
    return (
      <button id="GanttExport_delete" ref={this.deleteButtonRef}>
        删除
      </button>
    );
  }
}

内容的提问来源于stack exchange，提问作者Masir