ReactJS实战之事件处理

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/> {/*                按钮*/} {/*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让你很烦，这里有两种方式可以解决。如果你正在使用实验性的属性初始化器语法，你可以使用属性初始化器来正确的绑定回调函数：