react事件的问题

Posted 2022-01-27 曹豆芽

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>

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