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')
  }
}
上一篇:leetcode 222. 完全二叉树的节点个数


下一篇:web前端入门到实战:纯css制作电闪雷鸣的天气图标