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 ( 点我)
  }
}
ReactDOM.render(, document.getElementById('root'))

函数组件事件绑定

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
  function handleClick() {
    console.log(111);
  }
  // 函数组件内没有this,所以直接写函数名,不需要加 this.
  return (点我)
}
ReactDOM.render(, document.getElementById('root'))

总结

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