Talk is cheap. Show me your code

从 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组件事件详解》

posted @ 2019-06-03 14:39 Wise.Wrong 阅读(...) 评论(...) 编辑 收藏