React 元素的事件处理和 DOM元素的很相似。
如果采用 JSX,需传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)。
例如,传统的 HTML:
React 中稍稍不同
React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。必须明确使用 preventDefault。例如,传统的 HTML 中阻止链接默认打开一个新页面,可以这样写:
在 React,应该这样写
使用 React 的时候通常你不需要使用 addEventListener
为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。
当使用ES6 class语法来定义一个组件的时候,事件处理器会成为类的一个方法.
例如,下面的 Toggle
组件渲染一个让用户切换开关状态的按钮:
类的方法默认是不会绑定this
的。如果你忘记绑定 this.handleClick
并把它传入 onClick
, 当你调用这个函数的时候 this
的值会是 undefined
。
这并不是 React 的特殊行为;它是函数如何在 JavaScript 中运行的一部分。
如果你没有在方法后面添加 ()
,例如 onClick={this.handleClick}
,你应该为这个方法绑定 this
。
如果使用 bind
让你很烦,这里有两种方式可以解决。如果你正在使用实验性的属性初始化器语法,你可以使用属性初始化器来正确的绑定回调函数: