Perché questo non è presente nella funzione React onSubmit?

Question

Nel mio componente Reagire Ho una forma con funzione di onSubmit

<form className="form-horizontal" name="taskForm" onSubmit={this.submitTask}>

submitTask(e) { 

    e.preventDefault(); 
    console.log(this.props); // undefined 
    console.log(this) // window object 
} 

Per qualche ragione this.props non è portata quando uso modulo onSubmit. Quando I console.log(this.props) nel costruttore, gli oggetti di scena si disconnettono normalmente.

Quando I console.log(this) è l'oggetto finestra. Come ottengo lo scopo del componente di reazione?

Answer 1

questo è più ampio problema, perché un comportamento simile a questo si noterà quando si utilizzano altri eventi dei componenti, ad esempio (onClick, onChange, onSubmit)

Nella documentazione v'è nota a questo proposito:

https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

I metodi seguono la stessa semantica delle classi ES6 regolari, ovvero non si associano automaticamente all'istanza. Dovrai utilizzare esplicitamente .bind (this) o arrow functions =>.

Come descritto è necessario associare tali metodi o utilizzare le funzioni freccia. Se si sceglie l'associazione, è possibile eseguire il binding nel costruttore o nel componente sottoposto a rendering.

nel costruttore:

constructor(props) { 
    super(props); 
    this.submitTask = this.submitTask.bind(this); 
} 

In componente reso:

<form className="form-horizontal" name="taskForm" onSubmit={this.submitTask.bind(this)}> 

Con la funzione freccia è possibile passare il contenuto submitTask a freccia funzione:

<form className="form-horizontal" name="taskForm" onSubmit={e => { 
    e.preventDefault(); 
    console.log(this.props); // undefined 
    console.log(this) // window object 
}}>