Question

我刚开始学习React和JavaScript 在完成本教程的过程中，我得到了一个组件的示例代码，它创建了一个切换按钮：

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }

    render() {
        return (
            <button onClick={this.handleClick}>
                {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
        );
    }
}

我看到它的方式，handleClick和render函数都使用类的this对象，这超出了它们的范围（对吗？）。

那么为什么我只需要将它绑定到handleClick？

Answer 1

Javascript在调用时分配范围，而不是在定义时。您需要bind()您的handleClick()方法，以便在从模板调用它时，它仍然可以通过this访问类的范围。

将React模板编译成javascript函数，因此，如果您没有bind()，则onClick={this.handleClick}处理程序将作用于调用它的模板函数。在您的情况下，它将引用被单击的按钮。

如果您的事件处理程序从未引用this，则它不需要绑定，但由于您正在调用this.setState()，因此必须进行绑定以使处理程序了解类范围。

Answer 2

在任何反应类中，诸如componentWillMount，componentDidMount，render等函数在呈现元素时通过内部反应调用，我们从不调用这些方法。

现在由于调用范围是在调用时决定的，所以在适当的范围内调用/绑定这些方法是有反应的。所以我们不需要为这些函数烦恼。

然而，上面示例中的handleClick之类的其他函数是我们制作的方法，并且react对此一无所知。此方法的调用也是由我们定义的（即单击按钮时）。因此，我们的工作是使用正确的范围调用/绑定此方法。

这就是我们在上面的例子中只绑定handleClick而不是render函数的原因。

为什么一个功能需要绑定而另一个功能不需要？

2 个答案: