react事件的问题

Posted 2021-07-17 曹豆芽

react的事件是我们学习react必会学习的，react事件处理会有多种方法，也有一种不经意的小问题。下面一起看看react事件处理问题

//代码一
import React from 'react'

class App extends React.Component {

    submit(){
        console.log('你点击')
    }

    render() {
        return (
           <div onClick={this.submit}>点击</div>
        )
    }
}
export default App;

//代码二
import React from 'react'

class App extends React.Component {

    submit(){
        console.log('你点击')
    }

    render() {
        return (
           <div onClick={this.submit()}>点击</div>
        )
    }
}
export default App;

上面二段代码的相差不大，但是结果是二种不同的结果，代码一点击才会去触发事件，二代码而当运行的时候，就会去触发事件，后者声明时就直接执行了（因而加载页面自动执行），执行后的返回值赋给了onClick属性（返回值必然不会是个函数，因而再点击没有作用）

那么解决这个问题我们可以改变this指向。就可以解决了。
bind改变

<div onClick={this.submit.bind()}>点击</div>

箭头函数改变

 <div onClick={()=>{this.submit()}}>点击</div>

这个时候我们就会发现事件恢复正常。