React 事件处理
React 事件处理
React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同:
React 事件的命名采用小驼峰式(camelCase),而不是纯小写。
使用 JSX 语法时你需要传入作为事件处理,而不是字符串。
例如,传统的 HTML:
<button onclick="activateLasers()"> Activate Lasers </button>
在 React 中略微不同:
<button onClick={activateLasers}> Activate Lasers </button>
在 React 中另不同点是你不能通过返回 false 的方式阻止认行为。你必须显式的使用 preventDefault 。例如,传统的 HTML 中阻止认打开新,你可以这样写:
<a href="#" onclick="console.log('The link was clicked.'); return false"> Click me </a>
在 React 中,可能是这样的:
function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" onClick={handleClick}> Click me </a> ); }
,e 是合成事件。React 根据 来定义这些合成事件,所以你不需要担心跨浏览器的兼容性问题。如果想了解更多,请查看 SyntheticEvent 参考指南。
使用 React 时,你一般不需要使用 addEventListener 为已创建的 DOM 元素监听器。事实上,你只需要在该元素初始渲染的时候监听器即可。
当你使用 语法定义组件的时候,通常的做法是将事件处理声明为 class 中的。例如,下面的 Toggle 组件会渲染让切换开关状态的按钮:
class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 为了在回调中使用 `this`,这个绑定是必不可少的 this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(state => ({ isToggleOn: !state.isToggleOn })); } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> ); } } ReactDOM.render( <Toggle />, document.getElementById('root') );
你必须谨慎对待 JSX 回调中的 this,在 JavaScript 中,class 的认不会 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick,当你这个的时候 this的值为 undefined。
这并不是 React 特有的行为;这其实与 有关。通常情况下,如果你没有在后面 (),例如 onClick={this.handleClick},你应该为这个绑定 this。
如果觉得使用 bind 很麻烦,这里有两种方式可以。如果你正在使用实验性的 ,你可以使用 class fields 正确的绑定回调:
class LoggingButton extends React.Component { // 此语法确保 `handleClick` 内的 `this` 已被绑定。 // 注意: 这是 *实验性* 语法。 handleClick = () => { console.log('this is:', this); } render() { return ( <button onClick={this.handleClick}> Click me </button> ); } }
认启用此语法。
如果你没有使用 class fields 语法,你可以在回调中使用:
class LoggingButton extends React.Component { handleClick() { console.log('this is:', this); } render() { // 此语法确保 `handleClick` 内的 `this` 已被绑定。 return ( <button onClick={(e) => this.handleClick(e)}> Click me </button> ); } }
此语法问题在于每次渲染 LoggingButton 时都会创建不同的回调。在大多数情况下,这没什么问题,但如果该回调作为 prop 传入子组件时,这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类问题。
向事件处理程序传递参数
在循环中,通常我们会为事件处理传递额外的参数。例如,若 id 是你要那一行的 ID,以下两种方式都可以向事件处理传递参数:
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
上述两种方式是等价的,分别通过和 来实现。
两种情况下,React 的事件对象 e 会被作为第二个参数传递。如果通过箭头的方式,事件对象必须显式的进行传递,而通过 bind 的方式,事件对象以及更多的参数将会被隐式的进行传递。
如何使用 React 来进行事件处理?
首先一起来看看React事件处理的简单例子:
import React, { Component } from 'react'; import { render } from 'react-dom'; class LikeButton extends Component { constructor(props) { super(props); this.state = { liked: false }; } handleClick(e) { this.setState({ liked: !this.state.liked }); } render() { const text = this.state.liked ? 'like' : 'haven\'t liked'; return ( <p onClick={this.handleClick.bind(this)}> You {text} this. Click to toggle. </p> ); } } render( <LikeButton />, document.getElementById('example') );
可以看到 React 里面绑定事件的方式和在 HTML 中绑定事件类似,使用驼峰式命名指定要绑定的 onClick为组件定义的 {this.handleClick.bind(this)}。
注意要显式 bind(this) 将事件上下文绑定要组件实例上,这也是 React 推崇的原则:没有黑科技,尽量使用显式的容易理解的 JavaScript 。
“合成事件”和“原生事件”
React 实现了“合成事件”层(synthetic event sy),这个事件模型保证了和 W3C 标准保持一致,所以不用担心有什么诡异的,并且这个事件层消除了 IE 与 W3C 标准实现之兼容问题。
“合成事件”还提供了额外的好处:
“合成事件”会以事件委托(event delegation)的方式绑定到组件最上层,并且在组件卸载(unmount)的时候销毁绑定的事件。
比如你在 componentDidMount 里面通过 addEventListener 绑定的事件就是浏览器原生事件。
使用原生事件的时候注意在 componentWillUnmount 解除绑定 removeEventListener。
所有通过 JSX 这种方式绑定的事件都是绑定到“合成事件”,除非你有特别的理由,建议总是用 React 的方式处理事件。
Tips
关于这两种事件绑定的使用,这里有必要一些额外的人生经验
如果混用“合成事件”和“原生事件”,比如一种常见的场景是用原生事件在 document 上绑定,然后在组件里面绑定的合成事件想要通过 e.stopPropagation() 来阻止事件冒泡到 document,这时候是行不通的,参见 ,因为 e.stopPropagation 是内部“合成事件” 层面的,是要用 e.nativeEvent.stopImmediatePropagation()
”合成事件“ 的 event 对象只在当前 event loop 有效,比如你想在事件里面 promise,在 resolve 之后去拿 event 对象会拿不到(并且没有抛出):
handleClick(e) { promise.then(() => doSomethingWith(e)); }
详情见 说明。
参数传递
给事件处理传递额外参数的方式:bind(this, arg1, arg2, ...)
render: function() { return <p onClick={this.handleClick.bind(this, 'extra param')}>; }, handleClick: function(param, event) { // handle click }