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) }>

<强>第三

使用箭头功能

定义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

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

<强>第一即可。 .bind(this)用于将此上下文绑定到组件函数。 React ES6类不会自动绑定上下文，因此您必须显式绑定。有几种方法可以做到这一点，.bind(this)是一种方式。如果你不想使用那种方法，你可以

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

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

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

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

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

<强>第二即可。 onChange={(event) => { this.someEventHandler(event) }使用内联lambda（胖箭头）函数包装组件处理函数，该函数可以提供一些额外的功能。假设你想为你的函数发送一个额外的参数，这是实现这一目标的一种方法。

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

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

<强>第三即可。您只是将函数作为回调函数传递，以便在单击事件发生时触发，而无需其他参数

总结一下。这三个示例都与将处理函数传递给click事件有关。但是您可以添加不同的东西。第一个是关于你的this背景。第二个是关于如何将参数传递给处理函数。

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

2 个答案: