React事件绑定详解
更新时间:2021年12月16日 17:09:25 作者:Fx_cap
这篇文章主要为大家介绍了React事件绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
- React事件绑定和原生DOM事件绑定相似
- 语法:on+事件名={事件处理程序} 例如:onClick={()=>{}}
- 注意:React事件采用驼峰命名法
类组件事件绑定
import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { handleClick() { console.log(111); } render() { return (<button onClick={this.handleClick} > 点我</button >) } } ReactDOM.render(<App />, document.getElementById('root'))
函数组件事件绑定
import React from 'react'; import ReactDOM from 'react-dom'; function App() { function handleClick() { console.log(111); } // 函数组件内没有this,所以直接写函数名,不需要加 this. return (<button onClick={handleClick}>点我</button>) } ReactDOM.render(<App />, document.getElementById('root'))
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!
相关文章
使用react-activation实现keepAlive支持返回传参
本文主要介绍了使用react-activation实现keepAlive支持返回传参,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-05-05解析react 函数组件输入卡顿问题 usecallback react.memo
useMemo是一个react hook,我们可以使用它在组件中包装函数。可以使用它来确保该函数中的值仅在依赖项之一发生变化时才重新计算,这篇文章主要介绍了react 函数组件输入卡顿问题 usecallback react.memo,需要的朋友可以参考下2022-07-07
最新评论