react事件的问题

Posted 曹豆芽

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react事件的问题相关的知识,希望对你有一定的参考价值。

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>

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

以上是关于react事件的问题的主要内容,如果未能解决你的问题,请参考以下文章

react事件的问题

react事件的问题

React 深入系列5:事件处理

React Native组件之TextInput

React Native 转换起源

熟悉事件循环?那谈谈为什么会分为宏任务和微任务。