¿Me equivoco si explico el ejemplo proporcionado de esta manera? Una vez que se carga el componente, se hará clic en el primer botón automáticamente porque se llamó a this.handleClick1 agregando el corchete.
Si hace clic en el segundo botón, habrá un error porque está utilizando una función es5 y la palabra clave "esto" se comporta de manera diferente en una función ES5 en comparación con la función de flecha o la función ES6. En la función ES5, la palabra clave "this" se refiere directamente al objeto que lo contiene y, en este caso, el objeto que lo contiene es el que es un objeto, por lo que hay un error porque el objeto del botón no contiene una propiedad handleClick1. Para solucionar este problema, debe usar una función ES6 para declarar la función handleClick1 o si debe usar la función ES5, debe vincular la función a la clase.
El primer botón no se hace clic inmediatamente. Está llamando a la función del controlador inmediatamente en lugar de asignarla como controlador.
Las funciones de flecha y .bind() actúan de manera similar en el sentido de que vinculan estáticamente this para esa función.
Sin embargo, React.Component no vinculará estáticamente los métodos a sí mismo . Si configura (correctamente) un botón onClick en un método de componente, el contexto cambiará. Para corregir este comportamiento un tanto inesperado, necesitará usar funciones de flecha o .bind() en el constructor.
Tenga en cuenta que si llamara a handleClick1() desde dentro de su componente (como lo hace cuando configura incorrectamente el primer controlador de botón), this será lo que espera que sea. Así es como funciona esto .
Aquí hay una caja de arena para cualquier persona interesada: https://codesandbox.io/s/react-playground-forked-nimby?file=/index.js