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