javascript – 为什么以及何时需要在React中绑定函数和eventHandlers？

2019-09-11 10:37:32 阅读：566 来源： 互联网

标签：javascript ecmascript-6 reactjs es6-class

class SomeClass extends Component{
  someEventHandler(event){
  }
  render(){
    return <input onChange={------here------}>
  }
}

我看到不同版本的——这里——部分.

// 1
return <input onChange={this.someEventHandler.bind(this)}>

// 2
return <input onChange={(event) => { this.someEventHandler(event) }>

// 3
return <input onChange={this.someEventHandler}>

版本有何不同？或者只是一个偏好问题？

谢谢大家的回答和评论.所有这些都很有用,如果您对此我感到困惑,我强烈建议您首先阅读此链接.
http://blog.andrewray.me/react-es6-autobinding-and-createclass/

解决方法:

绑定不是React特有的,而是在Javascript中如何工作.每个函数/块都有自己的上下文,对于函数来说,它的调用方式更具体.在添加ES6支持(类语法)时,React团队决定不对该类上的自定义方法(也就是内部方法,如componentDidMount)进行绑定.

当你应该绑定上下文取决于函数的目的,如果你需要访问类上的props,state或其他成员,那么你需要绑定它.

对于您的示例,每个都是不同的,这取决于您的组件的设置方式.

预先绑定到您的班级

.bind(this)用于将此上下文绑定到组件函数.但是,它会在每个渲染周期返回一个新的函数引用！如果您不想在函数的每次使用上绑定(例如在单击处理程序中),则可以预绑定该函数.

一个.在你的构造函数中做绑定.又名

class SomeClass extends Component{
    constructor(){
        super();
        this.someEventHandler = this.someEventHandler.bind(this);
    }
    someEventHandler(event){
    }
    ....
}

湾在类胖箭头函数上创建自定义函数.又名

class SomeClass extends Component{
    someEventHandler = (event) => {
    }
    ....
}

运行时绑定到您的类

几种常见的方法

一个.您可以使用内联lambda(胖箭头)函数包装组件处理函数.

onChange={(event) => { this.someEventHandler(event) }

这可以提供额外的功能,例如,如果您需要为点击处理程序传递其他数据< input onChange = {(event)=> {this.someEventHandler(event,’username’)}>.使用bind也可以完成同样的操作

湾你可以使用.bind(this),如上所述.

onChange={this.someEventHandler.bind(this) }

使用额外的参数< input onChange = {this.someEventHandler.bind(this,'username')}>

如果要避免创建新的函数引用但仍需要传递参数,最好将其抽象为子组件. You can read more about that here

在你的例子中

// 1
return <input onChange={this.someEventHandler.bind(this)}>

这只是对您的类执行运行时事件处理程序绑定.

// 2
return <input onChange={(event) => { this.someEventHandler(event) }>

另一个运行时绑定到您的类.

// 3
return <input onChange={this.someEventHandler}>

您只是将函数作为回调函数传递,以便在单击事件发生时触发,而无需其他参数.一定要预先绑定它！

总结一下.考虑如何优化代码很好,每种方法都有一个实用程序/目的,具体取决于您的需求.

标签：javascript,ecmascript-6,reactjs,es6-class
来源： https://codeday.me/bug/20190911/1804571.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 为什么以及何时需要在React中绑定函数和eventHandlers？