从 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} />
参考资料: