为什么和何时我们需要绑定函数和事件处理程序的反应？

Question

为什么和何时我们需要绑定函数和事件处理程序的反应？class SomeClass extends Component{   someEventHandler(event){   }   render(){     return <input onChange={------here------}>   }}我看到不同版本的------here------部分。// 1return <input onChange={this.someEventHandler.bind(this)}>// 2return <input onChange={(event) => { this.someEventHandler(event) }>// 3return <input onChange={this.someEventHandler}>版本有什么不同？还是只是偏好的问题？谢谢大家的回答和评论。所有这些都是有帮助的，我强烈建议阅读这个链接。第一如果你和我一样对此感到困惑的话。http：/blog.andreurey.me/React-ES6-autobinding-andcreateclass/

Answer 1

绑定不是特定的反应，而是如何反应。this在Javascript工作。每个函数/块都有它自己的上下文，对于函数来说，它更具体的是如何调用它。反应小组决定this不绑定类上的自定义方法(也不是类的内置方法，如componentDidMount)时，添加ES6支持(类语法)。

当您应该绑定上下文时，取决于函数的用途，如果您需要访问类中的道具、状态或其他成员，则需要绑定它。

对于您的示例，每一个都是不同的，这取决于您的组件是如何设置的。

第一. .bind(this)用于将此上下文绑定到组件函数。如果您不想绑定该函数的每次使用(如在单击处理程序中)，则可以通过以下任一方法预绑定该函数。

在构造函数中做绑定。阿卡

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

或者B.使您的自定义函数在类FAT箭头函数上。阿卡

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

所有这些都涉及到这个上下文绑定。

第二. onChange={(event) => { this.someEventHandler(event) }是用内联lambda(FAT箭头)函数包装组件处理程序函数，该函数可以提供一些附加功能。假设您想要向您的函数发送额外的Param，这是实现该功能的一种方法。

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

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

第三..您只是将函数作为回调函数传递，以便在发生单击事件时触发，而不需要附加参数。

总结一下。这三个示例都与将处理程序函数传递给单击事件有关。然而，有不同的东西，你可以添加到这一点。第一个是关于你的this背景。第二个问题是如何将参数传递给处理程序函数。