react事件的问题

曹豆芽

于 2021-06-24 11:48:18 发布

阅读量255

点赞数 3

分类专栏： js react 笔记文章标签： js react javascript 新星计划

本文链接：https://blog.youkuaiyun.com/qq_41108972/article/details/118181226

版权

js 同时被 3 个专栏收录

33 篇文章

订阅专栏

笔记

8 篇文章

订阅专栏

react

5 篇文章

订阅专栏

本文探讨了React中事件处理的两种常见方法，揭示了它们之间的微妙区别。代码示例显示，直接调用函数会导致在组件挂载时立即执行，而非在点击时。为了解决这个问题，文章介绍了两种解决方案：使用`bind`和箭头函数来确保事件处理函数在正确的时间被调用。通过这两个方法，可以确保React事件处理正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

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