事件绑定的几种方式(React的事件绑定)

最新推荐文章于 2024-10-13 13:46:01 发布

黄瓜味薯片吼吼吃

最新推荐文章于 2024-10-13 13:46:01 发布

阅读量423

点赞数

分类专栏： react 文章标签：前端 javascript react.js reactjs Powered by 金山文档

本文链接：https://blog.csdn.net/qq_46051895/article/details/128927121

版权

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了在React中处理按钮点击事件的三种方法，包括使用addEventListener、onclick属性以及在jsx中绑定事件处理函数。强调在React组件中，应当使用jsx的onClick属性结合箭头函数来确保this的正确指向。同时，指出了在jsx中书写事件处理函数的注意事项，如不用引号括起函数名，避免立即执行等。

摘要由CSDN通过智能技术生成

html：

<button id='btn1'>按钮1</button>
<button id='btn2'>按钮2</button>
<button onclick="demo()">按钮3</button>

js：

// 方法1：addEventListener()
const btn1 document.getElementById('btn1')
btn1.addEventListener('click',()=> {
    console.log('按钮1被点击了');
})

// 方法2：onclick()
const btn2 document.getElementById('btn2')
btn2.onclick=()=> {
    console.log('按钮2被点击了');
})

// 方法3
function demo() {
    console.log('按钮3被点击了');
}

React里通常使用第三种方法，但是需要注意以下几点：

这里的onclick使用驼峰式，正确应为onClick；

"demo()"表示字符串，所以不能带引号，正确应为花括号{}；

{demo()}表示赋值，将demo的结果赋过来，所以页面加载的时候就会执行该方法，直接输出结果，所以要去掉小括号，正确应为{demo}，只有在点击的时候才回调该方法；

function demo() {...}应写为箭头函数，否则方法内的this指向会丢失，在使用this时会报undefined错误，因为类中的方法默认开启了局部严格模式。

总结：

React里用类创建组件时，组件里的自定义方法都要写成赋值语句+箭头函数的形式

方法调用时正确的写法为：

...
<button onClick={this.demo}>按钮3</button>
...

demo = ()=> {
    console.log('按钮3被点击了');
}