Reagieren: Zugreifen auf Kontext in einer ES6-Klasse

Question

Mit der ES6-Klassensyntax kann ich den Wert context in anderen Methoden innerhalb der Klasse nicht beibehalten. Zum Beispiel:

class Repos extends React.Component { 
    constructor(props, context) { // eslint-disable-line 
    super(props, context); 
    console.log(this.context.router); 
    } 

    handleSubmit(event) { 
    event.preventDefault(); 
    const userName = event.target.elements[0].value; 
    const repo = event.target.elements[1].value; 
    const path = `/repos/${userName}/${repo}`; 
    console.log(path); // eslint-disable-line 
    this.context.router.push(path); 
    } 

Zum ersten Konsolenprotokoll, Kontext bestehen:

Für das zweite Konsolenprotokoll, nicht so sehr:

Wie funktioniert eine Handle this.context in Methoden außerhalb des Konstruktors, aber innerhalb der Klasse?

Answer 1

Haben Sie die Bindefunktion nicht vergessen, um den Kontext zu speichern?

Wenn Sie die Funktion an ein Aktionsattribut übergeben (z. B. onSubmit), sollten Sie bind verwenden. React ES6-classes autobind Methoden nicht automatisch.