第一直觉代码如下:后果是写在后面的事件函数覆盖前面的事件函数,只执行第二条(弹出 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')
}
}