React 的 DOM 添加多个点击事件

第一直觉代码如下：后果是写在后面的事件函数覆盖前面的事件函数，只执行第二条(弹出 222)。

import React, { Component, Fragment } from 'react'

export default class Alert extends Component {
  render() {
    return (
      <Fragment>
        <div
          onClick = {this.alert1}
          onClick = {this.alert2}
        >
        ALERT
        </div>
      </Fragment>
    )
  }

  alert1 = () => {
    alert('111')
  }

  alert2 = () => {
    alert('222')
  }
}

正确的代码应该如下：在点击事件中使用箭头函数，依次写入两个函数且能正确执行(先弹出 111 确定后弹出 222)。

import React, { Component, Fragment } from 'react'

export default class Alert extends Component {
  render() {
    return (
      <Fragment>
        <div
          onClick = {() => {this.alert1(); this.alert2()}}
        >
        ALERT
        </div>
      </Fragment>
    )
  }

  alert1 = () => {
    alert('111')
  }

  alert2 = () => {
    alert('222')
  }
}

转载于:https://www.cnblogs.com/zhourongcode/p/11129802.html