React 事件绑定的正确姿势

最近在写 React,对于将一个事件处理函数绑定到按钮上,总是有一种感觉:这么写也行,那么写也行。所以就参考了文档,整理了一下各种写法。主要是参考 React 的文档来写的,非常基础,非 React 的入门同学,这篇文章可以不看了。

绑定事件最基本的做法如下:

第 18 行将 this.handleClick 绑定到了按钮上。注意这里第 7 行在类的初始化函数中有一个绑定 this 的操作,这个是必须的。如果不写,那么 handleClick() 函数中的 this 将会是 undefined (这个是 JS 的特性,不是 React 的)。在 console 中会看到错误如下:

如果你写过 jQuery,从这个例子中可以看出,和 jQuery 绑定事件的区别如下:

  1. 不是传入一个 string ,而是函数
  2. 组织默认的形式不是 return false 而是 e.preventDefault()
  3. jquery 是小写命名,React 是驼峰命名
  4. 不要往 DOM 上面去添加 Listener,而是在 render 的时候提供 listener

如果不想每次在初始化函数中写一个 bind,可以有两种方案:

第一种,将函数定义为 class 的一个 field:

第二种,绑定的时候定义一个匿名函数(箭头函数),将匿名函数与元素绑定,而不是直接绑定事件处理函数,这样 this 在匿名函数中就不是 undefined 了:

第二种方法有一个问题,每次 LoggingButton 渲染的时候都会创建一个新的 callback 匿名函数。在这个例子中没有问题,但是如果将这个 onClick 的值作为 props 传给子组件的时候,将会导致子组件重新 render,所以不推荐。

Bind 函数的时候传递参数,下面两种写法都可以(推荐第二种):

在第二种中,e 代表 React Event,将会自动作为第二个参数。



React 事件绑定的正确姿势”已经有3条评论

Leave a comment

您的电子邮箱地址不会被公开。 必填项已用 * 标注