React 元素的事件处理和 DOM元素的很相似。
- 但语法有点不同：
React事件绑定属性的命名采用小驼峰。
import React from "react"; export default class BindEvent extends React.Component { constructor() { super(); this.state } render() { return ( <div> BindEvent组件 <hr/> <button onClick={function () { console.log('OK!') }}>按钮 </button> </div> ) } }
进阶版
import React from "react"; export default class BindEvent extends React.Component { constructor() { super(); // 私有数据 this.state = {} } render() { return ( <div> BindEvent组件 <hr/> {/* <button onClick={function () { console.log('OK!') }}>按钮 </button> */} {/*onClick只接收 function 作为事件函数*/} <button onClick={this.myclickHandler}>按钮 </button> </div> ) } myclickHandler() { console.log('666'); } }
最佳实践版：
在这里插入代码片
事件处理函数
若采用 JSX，需传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)。
传统的 HTML：
React 写法，注意不要加小括号，直接传入函数名即可。
无法使用 false 禁止默认
必须明确使用 preventDefault。
传统的 HTML 中阻止链接默认打开一个新页面，可以这样写：
React 写法：
使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。
当使用ES6 class语法来定义一个组件的时候，事件处理器会成为类的一个方法.
例如，下面的Toggle组件渲染一个让用户切换开关状态的按钮：
类的方法默认是不会绑定this的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。
这并不是 React 的特殊行为；它是函数如何在 JavaScript 中运行的一部分。
如果你没有在方法后面添加() ，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。
如果使用 bind 让你很烦，这里有两种方式可以解决。如果你正在使用实验性的属性初始化器语法，你可以使用属性初始化器来正确的绑定回调函数：
