第一直觉代码如下: 后果是写在后面的事件函数覆盖前面的事件函数, 只执行第二条 (弹出 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')
- }
- }
来源: http://www.bubuko.com/infodetail-3112521.html