本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-07-24React事件绑定的方式
加载中
一、是啥
在react运用中，事情名全是用小骆驼峰文件格式开展撰写，比如onclick要改变成onClick
非常简单的事情关联以下：
class ShowAlert extends React.Component { showAlert() { console.log("Hi"); } render() { return <button onClick={this.showAlert}>show</button>; } }
从上边能够 见到，事情关联的方式必须 应用{}包起来
以上的编码看起来没有问题，可是当将处理函数輸出编码换为console.log(this)的情况下，点一下按键，则会发觉控制面板輸出undefined
二、怎样关联
为了更好地处理上边恰当輸出this的难题，普遍的关联方法有以下：
- render方法中应用bind
- render方法中应用箭头函数
- constructor中bind
- 界定环节应用箭头函数关联
render方法中应用bind
假如应用一个类部件，在这其中给某一部件/原素一个onClick特性，它如今并会自设关联其this到当今部件，处理这个问题的方式是在事情涵数后应用.bind(this)将this关联到当今部件中
class App extends React.Component { handleClick() { console.log('this > ', this); } render() { return ( <div onClick={this.handleClick.bind(this)}>test</div> ) } }
这类方法在部件每一次render3D渲染的情况下，都是会再次开展bind的实际操作，危害特性
render方法中应用箭头函数
根据ES6的前后文来将this的偏向关联给当今部件，一样在每一次render的情况下都是会转化成新的方式，危害特性
class App extends React.Component { handleClick() { console.log('this > ', this); } render() { return ( <div onClick={e => this.handleClick(e)}>test</div> ) } }
constructor中bind
在constructor中事先bind当今部件，能够 防止在render实际操作中反复关联
class App extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('this > ', this); } render() { return ( <div onClick={this.handleClick}>test</div> ) } }
界定环节应用箭头符号函数关联
跟以上方法三一样，可以防止在render实际操作中反复关联，完成也十分的简易，以下：
class App extends React.Component { constructor(props) { super(props); } handleClick = () => { console.log('this > ', this); } render() { return ( <div onClick={this.handleClick}>test</div> ) } }
三、差别
以上四种方式的方法，差别关键以下：
- 撰写层面：方法一、方法二书写简易，方法三的撰写过度繁杂
- 特性层面：方法一和方法二在每一次部件render的情况下都是会转化成新的方式案例，特性难题缺乏。若该涵数做为特性值发送给子部件的情况下，都是会造成附加的3D渲染。而方法三、方法四只会转化成一个方式案例
综合性以上，方法四是最佳的事情关联方法
