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

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