react事件的问题

你的名字 2022-10-09 06:27 154阅读 0赞

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属性（返回值必然不会是个函数，因而再点击没有作用）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTA4OTcy_size_16_color_FFFFFF_t_70]  
那么解决这个问题我们可以改变this指向。就可以解决了。  
bind改变

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

箭头函数改变

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTA4OTcy_size_16_color_FFFFFF_t_70]: /images/20221005/6699a5bde1564c1e9ce027f495e7ad36.png

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关【React】React绑定事件

目录一、前言二、React元素事件处理与DOM元素区别三、React绑定事件与HTML绑定事件写法区别 1、HTML通常写法

亦凉/ 2023年10月16日 14:09/ 0 赞/ 56 阅读

相关 React-注册事件

文章目录注册事件事件处理函数中 this 问题事件传参

素颜马尾好姑娘i/ 2023年07月04日 11:24/ 0 赞/ 10 阅读

相关 React 的事件处理

React 的事件处理方法一 class flower extends Component { // 在react中状态的的修改是使用

野性酷女/ 2023年06月08日 10:45/ 0 赞/ 7 阅读

相关 React合成事件和jsDOM事件的区别

js事件： ①小写命名 <button onclick="activateLasers()">激活按钮</button> ②阻止默认事件点我 React

爱被打了一巴掌/ 2023年05月31日 12:19/ 0 赞/ 31 阅读

相关 react事件的问题

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

你的名字/ 2022年10月09日 06:27/ 0 赞/ 155 阅读

相关 React - 事件处理

类似于DOM事件处理，有几点不同之处： React的事件名字是首字母小写的驼峰式写法，而不是小写的。在JSX里面，事件处理器是一个函数，而不是一个字符串。例

拼搏现实的明天。/ 2022年07月10日 04:55/ 0 赞/ 206 阅读

相关 React -- 事件系统

React 中的虚拟DOM是在内存中以对象的形式存在的，因此，在对象上添加事件，就会非常容易。 React给予Virtual DOM实现了一个SyntheticEvent合成

绝地灬酷狼/ 2022年06月16日 02:46/ 0 赞/ 532 阅读

相关 React的事件系统

文章目录合成事件的绑定方式合成事件的实现机制事件委托自动绑定在React中使用原生事件原生事件和合成事件的混

悠悠/ 2021年12月12日 13:39/ 0 赞/ 275 阅读

相关 react 事件

1、阻止默认行为在表单中,只要设置了button,且命名为提交，则表单会默认提交，react中的 event是代理机制,与原生有区别

左手的ㄟ右手/ 2021年07月25日 02:47/ 0 赞/ 438 阅读

相关 react 样式、事件

React组件添加样式和事件样式: (1)组件内class属性变成className

浅浅的花香味﹌/ 2021年07月24日 17:09/ 0 赞/ 513 阅读