为什么我们需要在React中绑定函数和eventHandler，并且不同的绑定方法有什么区别 [英] Why do we need to bind function and eventHandlers in React and what is the difference between the different binding methods

问题描述

Some类型扩展Component {
someEventHandler（event）{
}
render（）{
return< input onChange = {------ here ------}>
}
}

我看到不同版本的 ------这里------ part。

  // 1 
 return< input onChange = {this.someEventHandler.bind（this）}> 
 
 // 2 
 return< input onChange = {（event）=> {this.someEventHandler（event）}> 
 
 // 3 
 return< input onChange = {this.someEventHandler}> 
  

版本有何不同？还是只是一个偏好的问题？

---

感谢大家的答案和评论。所有都是有帮助的，我强烈建议您阅读此链接 FIRST ，如果您对此感到困惑。

http://blog.andrewray.me/react-es6-autobinding-and-createclass/

解决方案

每个都有所不同，这取决于您的组件的设置方式

即可。 .bind（this）用于将您的上下文绑定到您的组件功能。 React ES6类不会自动绑定上下文，因此您必须明确绑定。有几种方法可以做到这一点， .bind（this）是一种方式。如果您不想使用该方法，您可以

a。在你的构造函数中做绑定。 aka

  class SomeClass extends Component {
 constructor（）{
 super（）; 
 this.someEventHandler = this.someEventHandler.bind（this）; 
} 
 someEventHandler（event）{
} 
 .... 
} 
  

或

或b。使您的自定义功能在类胖箭头功能。 aka

  class SomeClass extends Component {
 someEventHandler =（event）=> {
} 
 .... 
} 
  

处理此上下文绑定。

第二个。 on $ {code> onChange = {（event）=> {this.someEventHandler（event）} 正在使用可以提供一些附加功能的内联lambda（胖箭头）函数来包装您的组件处理函数。假设你想发送一个额外的参数到你的函数，这是一种方式来实现。

< input onChange = {（event ）=> {this.someEventHandler（event，'username'）}>

这将是一种将附加参数传递给处理函数的方法如果需要，

三分之一。您只是传递函数作为回调函数，以触发点击事件发生时，没有其他参数

总结。这三个例子都与将一个处理函数传递给一个点击事件有关。但是有不同的事情你可以添加到这个。第一个是关于你的这个上下文。第二个是关于如何传递参数到你的处理函数。

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

I see different versions of ------here------ part.

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

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

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

How are the versions different? Or is it just a matter of preference?

---

Thank you all for answers and comments. All are helpful, and I strongly recommend to read this link FIRST if you are confused as me about this.
http://blog.andrewray.me/react-es6-autobinding-and-createclass/

解决方案

Each is different and it depends on how your component is set up

First. .bind(this) is used to bind your this context to your components function. React ES6 classes do not auto bind context so you must bind explicitly. There are a few ways to do that and .bind(this) is a way. if you don't want to use that method you can either

a. in your constructor do the binding. aka

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

or b. make your custom functions on the class fat arrow functions. aka

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

this all deals with this context binding.

Second. onChange={(event) => { this.someEventHandler(event) } is wrapping your components handler function with an inline lambda (fat arrow) function that can provide some additional functionality. Lets say you want to send an additional param to your function, this is a way to achieve that.

<input onChange={(event) => { this.someEventHandler(event, 'username') }>

this would be a way to pass an additional parameter to a handler function if desired.

Third. You are just passing the function as the callback function to trigger when the click event happens, with no additional paramters

To summarize. These three examples all are related to passing a handler function to a click event.. however there are different things you can add to that. the first is about your this context. the second is about how to pass arguments to your handler function.

这篇关于为什么我们需要在React中绑定函数和eventHandler，并且不同的绑定方法有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！