React学习之事件处理

说明：本系列所有demo代码的github地址为：https://github.com/Brucewu998/react.js-learning，笔者会不断更新这些代码，本篇代码在目录下demo-06文件夹下。

我们知道，传统HTML的DOM包含了各种各样的事件处理，例如鼠标点击事件onclick：

在HTML中应用：

在JavaScript中应用：

React中也包含了鼠标处理事件，与传统的HTML鼠标处理事件相似，但在语法上稍微有点不同：

• React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
• 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

这里同样以上面的例子为例，在React中，鼠标的点击事件应该如下表示：

function handleClick(e) {
    e.preventDefault();
    console.log("Click button!");
}
function ClickButton() {
    return 
}

在React中，还存在另一个不同，就是不能通过返回false的方式组织默认行为；而是必须显示的使用preventDefault。

下面来看一个具体的鼠标事件点击例子：

上面的代码中，对handleClick方法重新绑定了this，是因为在JavaScript中，class的方法默认不会绑定this。将其传入onClick，调用的this值为undefined。

上面代码运行结果：

    

上一篇：React学习之state与生命周期