Tener el siguiente componente más simple.
class App extends Component { constructor(props) { super(props); console.log(this); this.state = { name: "John" } } clickHandler() { this.setState({ name: "Mark" }) }; render() { return ( <div className="App"> {this.state.name} <button onClick={this.clickHandler.bind(this)}></button> </div> ) }; } export default App;si escribo eso
<button onClick={this.clickHandler}></button>dice que esto en
this.setState({ name: "Mark" })es indefinido esa fila
<button onClick={console.log(this)}></button>muestra que esta es la aplicación . Entonces, si esta es la aplicación , ¿por qué clickHandler no se vincula automáticamente a ese objeto antes del punto?
<button onClick={this.clickHandler}></button>Por lo que entiendo en "context.function" , el contexto debe estar vinculado a la función. ¿O solo funciona para "context.function ()" ?
¿O solo funciona para "context.function ()"?
Eso es exactamente correcto. Depende de dónde se invoque la función.
Haciendo
<button onClick={this.clickHandler}></button> pasa clickHandler como parámetro. Las partes internas de React ven algo no completamente diferente a:
function button({ onClick }) { // ... theActualDOMButtonElement.addEventListener('click', onClick); }o
function button({ onClick }) { // ... theActualDOMButtonElement.addEventListener('click', (e) => { const reactCreatedSyntheticEvent = retrieveSyntheticEvent(e); onClick(reactCreatedSyntheticEvent); }); } Está pasando this.clickHandler como un parámetro, no invocándolo inmediatamente, ya que se invoca más tarde, y cómo se invoca más tarde determina this , no puede simplemente hacer onClick={this.clickHandler} sin asegurarse de que this es correcto, como invocar la función en línea, usar un campo de clase o usar un componente funcional.