如何将”this”上下文绑定到扩展React.Component的类中的自定义函数

我喜欢测试新技术和学习新知识, 尽管乍一看可能没什么用, 但它将在未来起重要作用。这就是React的情况, 因为我一直在使用纯JavaScript和jQuery的应用程序上工作, 因此由于金钱成本而进行升级不是一种选择。但是, 当出现一个新项目并且没有特定要求时, 我总是尝试使用可用的最新技术。

由于我最近没有碰触到任何反应, 因此我最终遇到了一种持久的行为, 这是令人震惊的, 因为它是纯JavaScript逻辑, 但是没有用。考虑以下呈现一些选项卡的react组件示例：

class EditorTabs extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            value: 0
        };
    }

    handleChange(event, newValue){
        this.setState({
            value: newValue
        })
    } 

    render() {
        return (
            <div>
                <AppBar position="static" color="default">
                    {/* note the onChange handler */}
                    <Tabs
                        value={this.state.value}
                        onChange={this.handleChange} 
                    >
                        <Tab label="Item One"/>
                        <Tab label="Item Two"/>
                    </Tabs>
                </AppBar>
                <TabPanel value={this.state.value} index={0}>
                    Item 1
                </TabPanel>
                <TabPanel value={this.state.value} index={1}>
                    Item Two
                </TabPanel>
            </div>
        );
    }
}

export default EditorTabs;

理解我为什么在本文中公开它的示例的特殊部分是, 事实是AppBar组件将handleChange函数附加到该组件的onChange事件(该事件在同一EditorTabs类中明确定义)。但是, 在代码执行期间, 提到的handleChange函数将触发异常, 因为this上下文将引用自身, 而不是react组件本身的this上下文。解决此问题的方法是简单地将构造方法中的此上下文绑定到所需的方法。例如：

// ... //

class EditorTabs extends React.Component {

    constructor(props) {
        // ... //

        // !important
        // Bind the this context of the React.Component
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event, newValue){
        // So now the this context in handleChange will be
        // the this context of the component itself
        // Now calling the setState function won't trigger the exception
        this.setState({
            value: newValue
        })
    } 

    render() {
        // ... //
    }
}

// ... //

通过简单地更新函数的this上下文：

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

将使你的代码正常工作, 并在理论上正常工作。

编码愉快！