何时将此关键字绑定到react中的事件处理程序？

Question

所以，假设我有一个名为Search的类，它是一个带有提交按钮的简单输入字段。 这是代码。

class Search extends Component {
    constructor(props){
        super(props);
        this.state = {term: ''};

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        console.log(this);
        console.log(e.target.value);
        this.setState({term: e.target.value});
    }

    render() {
        return (
                <form className='input-group'>
                    <input className='form-control' 
                    placeholder='City' 
                    onChange={this.handleChange}
                    value={this.state.value}/>
                    <span className='input-group-btn'>
                        <button type='submit' className='btn btn-primary'>Submit</button>
                    </span>
                </form>
        )
    }
}

所以，我需要绑定this关键字的事件处理程序， handleChange ，在类的构造函数中，使其具有正确的参考this里面handleChange事件处理程序。

但是，如果我将代码更改为以下内容

class Search extends Component {
    constructor(props){
        super(props);
        this.state = {term: ''};

        //this.handleChange = this.handleChange.bind(this);

上面的评论

    }

    handleChange(e) {
        console.log(this);
        console.log(e.target.value);
        this.setState({term: e.target.value});
    }

    render() {
        return (
                <form className='input-group'>
                    <input className='form-control' 
                    placeholder='City' 
                    onChange={(e) => this.handleChange(e)} 

换行以上

                    value={this.state.value}/>
                    <span className='input-group-btn'>
                        <button type='submit' className='btn btn-primary'>Submit</button>
                    </span>
                </form>
        )
    }
}

现在，如果我将代码更改为上面的代码，我不再需要这样做，因为我从回调内部调用this.handleChange。 为什么会这样？

Answer 1

原因是您在创建回调时使用箭头功能 。

您不需要将箭头函数绑定到此，因为箭头函数“从词汇上绑定此值”。

如果需要，可以将事件处理函数更改为箭头函数，这样就不需要绑定它们。 您可能需要添加babel插件'transform-class-properties'以使用箭头函数转换类。

如果要将handleChange更改为箭头功能，只需更改即可

handleChange(e) {
    ...
}

至

handleChange = (e) => {
    ...
}

Answer 2

你有什么要考虑的是你期待什么this将评估的方法内，这一点是不能仅仅局限于回调。

在你的情况handleChange方法，你指的是this.setState ，你期待this当您创建扩展类是您的包含类的主体定义它React.Component 。

当调用像onClick这样的DOM事件处理程序时，处理程序内的this关键字将设置为调用它的DOM元素。 请参阅： 事件处理程序和内联处理程序中的 事件处理 程序 。

您可以推断，DOM元素上没有setState方法，因此为了获得所需的结果，必须将此绑定到正确的范围/上下文。

这可以通过.bind（）或=> （ 箭头函数 ）来实现，后者不会定义自己的范围/上下文，并使用它所包含的范围/上下文。

就像我之前说的那样，重新定义this不仅仅局限于DOM事件上的回调。 另一个例子是当调用.map()方法可在其中定义的上下文中this通过在上下文值传递作为第二个参数。