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事件的问题的主要内容,如果未能解决你的问题,请参考以下文章