从 Vue 的视角学 React（三）—— 事件处理

如果要处理某个元素的 click 事件，原生 js 可以直接为该元素添加一个 onclick 函数 

Vue 封装了 v-on 指令，可以简化为 @click 并添加相应的函数

React 的开发思想是尽量保留 js 的特性，所以事件处理也是用 onClick，只不过换成了驼峰命名

但在实际使用的时候，还需要绑定 this，由此而产生了很多优化方案

 

一、传统语法

原生 js 的事件命名是纯小写

<button onclick="handleClick()">Click Me</button>

React 中的事件命名和原生 js 很类似，只是改成了小驼峰的形式

<button onClick={this.handleClick}>Click Me</button>

需要特别留意的是，像 onClick 这样以 on 开头的原生事件，只能用在原生 HTML 标签上，而不能用在自定义的组件标签上

// 通常情况下，如果你没有在方法后面添加 ()，例如 onClick={this.handleClick}，你应该为这个方法绑定 this

 

在上面的这个 handleClick 函数中，如果直接打印 this，得到的值会是 undefined 或者 null

这是因为 React 在调用事件处理函数的时候，并不是从对象调用 this.handleClick，而是直接调用 handleClick

所以如果要操作 React.Component 实例 (即 this)，比如 this.setState()，就需要 bind(this)

<button onClick={this.handleClick.bind(this, name, id)}>Click Me</button>

或者直接用箭头函数

<button onClick={(e)=>this.handleClick(name, id, e)}>Click Me</button>

 

 

二、在构造函数中 bind(this)

如果把上面的代码补充成一个完整的组件：

这里直接在绑定 onClick 的处理函数的时候添加了 bind(this)，位于 render() 函数内部

如此一来，每次调用的 render() 的时候，相应的函数都会执行一次 bind(this)

这是非常影响效率的操作，而且在某些场景下，会导致组件的 props 的数据异常

官方推荐的解决方案是，在构造函数里面执行 bind(this)

但如果每一个函数都需要 bind(this)，这会是一件非常难受的事情，更优雅的做法是使用 Public Class Fields 语法

 

 

三、 Public Class Fields

上面的组件，在使用 Public Class Fields 语法会变得非常高效：

class TestButton extends React.Component {

  // 使用 public class fields 语法，不需要另外绑定 this
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click Me</button>
    );
  }
}

通过 Create React App 创建的项目，默认是支持这种语法的，可以直接使用

只是这种语法还处于试验阶段，如果不愿冒险，最好是在构造函数中绑定 this

四、为组件添加事件

上面有提到 onClick 只能在原生 HTML 中使用，在组件上使用是无效的

这是因为 React 的事件只能绑定到具体的 DOM 上，如果写到组件上，只会被当作组件的 props 属性

假设有一个组件 Child，如果要给它添加 onClick 的处理函数，可以这么写：

class Child extends Component {
    render() {
        return (
            <div onClick={this.props.onClick}/>
        )
    }
}

然后在父组件调用的时候，就可以直接给 onClick 绑定处理事件了

<Child onClick={this.handleClick} />



参考资料：

《事件处理》

《React组件事件详解》