React事件绑定是如何实现组件与用户交互的详细机制？

本文共计272个文字，预计阅读时间需要2分钟。

目录 + 组件事件绑定 + 函数组件事件绑定 + 总结 + React事件绑定与原生DOM事件绑定相似 + 语法：on+事件名={处理函数} + 例如：onClick={()=> {}} + 注意：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'))

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!