Cómo vincular el contexto `this` a una función personalizada dentro de una clase que extiende React.Component

Me encanta probar nuevas tecnologías y aprender cosas nuevas, que aunque parezcan inútiles a primera vista, jugarán un papel importante en el futuro. Ese es el caso de React, porque siempre he estado trabajando en aplicaciones que usan JavaScript simple y jQuery, por lo que actualizar debido a costos monetarios no es una opción. Sin embargo, cuando aparece un nuevo proyecto y no tiene requisitos específicos, siempre trato de utilizar las últimas tecnologías disponibles. 

Como no trabajo React recientemente, terminé con un comportamiento persistente que me dejó alucinado porque era pura lógica de JavaScript, pero no funcionaba. Considera el siguiente ejemplo de un componente de React que muestra algunas pestañas:

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;

La parte especial del ejemplo para comprender por qué lo expongo en este artículo es el hecho de que el componente AppBar adjunta la funcion handleChange al evento onChange del componente (que está claramente definido dentro de la misma clase EditorTabs). Sin embargo, durante la ejecución del código, la función handleChange mencionada activará una excepción ya que este contexto se referirá a sí mismo y no al contexto this del componente react en sí. La solución para este problema es simplemente vincular el contexto this en el constructor al método deseado. Por ejemplo:

// ... //

class EditorTabs extends React.Component {

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

        // !important
        // Enlaza el contexto de this de React.
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event, newValue){
        // Así que ahora este contexto en handleChange será
        // el contexto del componente en sí
        // Ahora llamar a la función setState no activará la excepción
        this.setState({
            value: newValue
        })
    } 

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

// ... //

Simplemente actualizando el contexto this de la función:

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

Hará que su código funcione correctamente y como debería teóricamente.

Que te diviertas ❤️!