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

Question

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

我看到不同版本的------here------部分.

// 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/

Answer 1

为什么要绑定React函数？

使用ES6类定义组件时,常见模式是将事件处理程序作为类的方法.在JavaScript中,默认情况下不会绑定类方法.如果您忘记bind this.someEventHandler并将其传递给onChange,则在实际调用该函数时,这将是未定义的.

通常,如果您引用一个没有()它的方法,例如onChange={this.someEventHandler},您应该绑定该方法.

有三种方法可以将onChange函数绑定到正确的上下文

第一

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

在本文中,我们使用bind显式函数来使onChange事件可用作eventHandler的参数.我们还可以使用类似语法的类型发送一些其他参数

return <input onChange={this.someEventHandler.bind(this, state.value)}>

第二

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

这是一个ES6语法,我们可以指定我们想要传递给someEventHandler函数的参数.这相当于.bind(this)它,它还使我们可以灵活地发送其他属性和事件

return <input onChange={(event, value) => { this.someEventHandler(event, value) }>

第三

使用Arrow函数定义函数someEventHandler

someEventHandler = () => {
    console.log(this); // now this refers to context of React component
}

一个arrow function不具有其自己的this,则this用于封闭执行上下文的值,因此上述函数获得正确的上下文.

或者将其绑定在构造像

constructor(props) {
   super(props);
   this.someEventHandler = this.someEventHandler.bind(this);
}


return <input onChange={this.someEventHandler}>

在此方法中,事件直接附加到someEventHandler函数.没有其他参数可以通过这种方式传递

Answer 2

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

首先.this用于将此上下文绑定到组件函数.React ES6类不会自动绑定上下文,因此您必须显式绑定.有几种方法可以做到这一点并且this是一种方式.如果您不想使用该方法,您也可以

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

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

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

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

这一切都涉及这种上下文绑定.

第二.componentDidMount使用内联lambda(胖箭头)函数包装组件处理函数,该函数可以提供一些额外的功能.假设你想为你的函数发送一个额外的参数,这是实现这一目标的一种方法.

.bind(this)

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

第三.您只是将函数作为回调函数传递,以便在单击事件发生时触发,而不会有其他参数

总结一下.这三个示例都与将处理函数传递给click事件有关.但是您可以添加不同的东西.第一个是关于你的<input onChange={(event) => { this.someEventHandler(event, 'username') }>背景.第二个是关于如何将参数传递给处理函数.