ReactJS onClick Funktion nicht funktioniert, Typeerror: Das ist null

Question

Ich versuche React zu lernen, aber scheint in der neuen Version gibt es einige Änderungen:

class Reactapp extends React.Component{ 

    constructor(){ 
     super(); 
    } 

    sayMassage(){ 
     console.log(this.props.children); 
    } 

    render(){ 
     var sayMassage = this.sayMassage.bind(this); 
     return(
      <div> 
       <h3> Hello {this.props.word}</h3> 
       <p> 
        <a href="#" onClick={this.sayMassage}> 
         Click Me 
        </a> 
       </p>; 
      </div> 
     ); 
    } 
} 

ReactDOM.render(
    <div> 
     <Reactapp word="React">This is a ReactJS 15.5 Tutorial</Reactapp> 
    </div>, 
    document.getElementById('root') 
); 

Dieser Code sollte funktionieren, aber scheint, ich bin etwas fehlt. Es sollte console.log "Dies ist ein ReactJS 15.5 Tutorial" super heißt vor diesem, so konnte dies nicht null sein.

Ich habe versucht, bind this, aber ich weiß nicht wie, Mein Code scheint zu scheitern. Der alte Code mit createReactClass hatte auto-binding tho.

Answer 1

Es ist ein Rahmen Problem, schreiben Sie einfach diese Zeile im Konstruktor, wird es funktionieren:

this.sayMassage = this.sayMassage.bind(this); 

und entfernen diese:

var sayMassage = this.sayMassage.bind(this); 

das Arbeitsbeispiel Check:

class Reactapp extends React.Component{ 
 
    constructor(){ 
 
     super(); 
 
     this.sayMassage = this.sayMassage.bind(this); 
 
    } 
 
    
 
    sayMassage(){ 
 
     console.log(this.props.children); 
 
    } 
 

 
    render(){ 
 
     
 
     return(
 
     <div> 
 
      <h3> Hello {this.props.word}</h3> 
 
      <p> 
 
       <a href="#" onClick={this.sayMassage}> 
 
        Click Me 
 
       </a> 
 
      </p> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
     <Reactapp word="React">This is a ReactJS 15.5 Tutorial</Reactapp>, 
 
     document.getElementById('root') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='root'/>

Answer 2

Sie können tun, was Mayank gesagt hat, aber es gibt einen anderen Weg - mit Pfeilfunktionen. Auf diese Weise übernimmt die Funktion automatisch das "Dies" der Klasseninstanz.

Es wird etwas wie das Folgende sein. Sie müssen natürlich die Bindung, die Sie ursprünglich gemacht haben, entfernen.

class Reactapp extends React.Component{ 

sayMassage =() => { 
    console.log(this.props.children); 
} 

render(){ 

    return(
<div> 
<h3> Hello {this.props.word}</h3> 
<p><a href="#" onClick={this.sayMassage}>Click Me</a></p>; 
</div> 
); 
} 
} 

ReactDOM.render(
<div> 
    <Reactapp word="React">This is a ReactJS 15.5 Tutorial</Reactapp> 
</div>, 
document.getElementById('root') 
); 

P.S. Es ist ein Tippfehler in den Funktionsnamen, sayMassage (sollte sayMessage sein), es sei denn, man wollte eigentlich Massage sagen :-)

Answer 3

Entfernen Sie zuerst Ihre Linie var sayMassage = this.sayMassage.bind(this);

Es ist in der constructor sein muss, wie dies :

constructor(){ 
    super(); 
    this.sayMassage = this.sayMassage.bind(this); 
} 

Oder um den Kontext zu halten, wenn sie bind Ihre function und nicht mit Aufrufen können Sie eine arrow function in der Verbindung wie folgt verwenden:

Answer 4

Eine Möglichkeit Ihres Scoping Problem zu lösen ist, wie so die Bindung an den Konstruktor der Klasse zu verschieben:

constructor(props) { 
super(props); 
this.state = {...}; 

this.sayThaiMassage = this.sayThaiMassage.bind(this); 

}

oder eine fette Pfeil-Funktion wie folgt:

myFatGreekMassage = (event) => { 
    ...your code 
} 

Während fette Pfeile funktionieren, behalten Sie den Umfang (das ist das) Ihr Problem ist auch gelöst.

Answer 5

Versuchen onClick={() => ::this.sayMassage}

Und var sayMassage = this.sayMassage.bind(this);

entfernen -

:: hier die binden diese mit dem aktuellen Bereich machen.

Die Pfeilfunktion deklariert eine Funktion, die ausgeführt wird, wenn Sie auf das Element klicken. Wenn Sie den Aufruf nicht als Funktion deklarieren, wird er bei jedem Neuladen der Seite ausgeführt, ohne dass eine Aktion erforderlich ist.