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')
  }
}