类似于DOM事件处理,有几点不同之处:
- React的事件名字是首字母小写的驼峰式写法,而不是小写的。
- 在JSX里面,事件处理器是一个函数,而不是一个字符串。
例子,HTML:
- <button onclick="activateLasers()">
- Activate Lasers
- </button>
React:
- <button onClick={activateLasers}>
- Activate Lasers
- </button>
例子,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>
- );
- }
使用React不需要再DOM创建之后给事件添加监听器,仅需在渲染的时候提供监听器即可。
用ES6的class定义一个组件的时候,事件监听器是作为一个类方法存在的。 例如下面的Toggle
组件,可以在“ON”和“OFF”之间切换:
- class Toggle extends React.Component {
- constructor(props) {
- super(props);
- this.state = {isToggleOn: true};
- // This binding is necessary to make `this` work in the callback
- this.handleClick = this.handleClick.bind(this);
- }
- handleClick() {
- this.setState(prevState => ({
- isToggleOn: !prevState.isToggleOn
- }));
- }
- render() {
- return (
- <button onClick={this.handleClick}>
- {this.state.isToggleOn ? 'ON' : 'OFF'}
- </button>
- );
- }
- }
- ReactDOM.render(
- <Toggle />,document.getElementById('root')
- );
关于JSX回调里面的那个this
:
在js里面,类方法默认是没有绑定(bound)的,加入你忘记了绑定this.handleClick
,然后把它传给onClick
,当函数被调用的时候,this
将会是undefined
。
这不是React的特有行为,可以参考这篇文章。 通常,在使用方法的时候,后面没有加()
,例如onClick={this.handleClick}
,这时你就要绑定这个方法。
第一种是使用实验性的属性初始化语法(property initializer Syntax),用属性初始化来绑定回调函数:
- class LoggingButton extends React.Component {
- // This Syntax ensures `this` is bound within handleClick.
- // Warning: this is *experimental* Syntax.
- // 确保'this'和handleClick绑定,这还是实验性的语法
- handleClick = () => {
- console.log('this is:',this);
- }
- render() {
- return (
- <button onClick={this.handleClick}>
- Click me
- </button>
- );
- }
- }
这个语法在React里面是默认可用的。
第二种方法是使用箭头函数(arrow function)。
- class LoggingButton extends React.Component {
- handleClick() {
- console.log('this is:',this);
- }
- render() {
- // This Syntax ensures `this` is bound within handleClick
- // 确保'this'和handleClick绑定
- return (
- <button onClick={(e) => this.handleClick(e)}>
- Click me
- </button>
- );
- }
- }
这种语法的问题是,每次渲染LoggingButton
的时候,都会创建不同的回调函数。 大部分情况下,这是没有问题的。但是,如果这个回调函数是作为一个prop
传递给下层组件的话,这些组件会重复渲染。 通常的推荐方法是在constructor
里面绑定,以避免这种性能问题。
参考链接:
- React Doc:handling events