React.js 实战之 事件处理

0 联系我

1. Java开发技术交流Q群

2.完整博客连接

3.我的知乎

4.gayhub

React 元素的事件处理和 DOM元素的很类似。可是有一点语法上的不一样:

React事件绑定属性的命名采用驼峰式写法，而不是小写。
若是采用 JSX 的语法你须要传入一个函数做为事件处理函数，而不是一个字符串(DOM元素的写法)
例如，传统的 HTML：

React 中稍稍有点不一样

在 React 中另外一个不一样是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。例如，传统的 HTML 中阻止连接默认打开一个新页面，你能够这样写：

在 React，应该这样来写

在这里， e 是一个合成事件。React 根据 W3C spec 来定义这些合成事件，因此你不须要担忧跨浏览器的兼容性问题。查看 SyntheticEvent 参考指南来了解更多。

使用 React 的时候一般你不须要使用 addEventListener 为一个已建立的 DOM 元素添加监听器。你仅仅须要在这个元素初始渲染的时候提供一个监听器。

• 当使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法.
  例如，下面的 Toggle 组件渲染一个让用户切换开关状态的按钮：
  
  

必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定this 的.
若是你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined.

这并非 React 的特殊行为；它是函数如何在 JavaScript 中运行的一部分。一般状况下，若是你没有在方法后面添加 () ，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。

若是使用 bind 让你很烦，这里有两种方式能够解决。若是你正在使用实验性的属性初始化器语法，你能够使用属性初始化器来正确的绑定回调函数：