Wie setze ich den Wert auf die Schaltfläche klicken Sie auf reagieren js?

Question

Ich möchte mit der Zustandswert auf den Button klicken ändern reagieren js.I Lage am Ereignis .Aber den eingestellten Wert nicht aktualisiert erhalten klicken warum .Ich dieses

btnClick(){ 
    alert('---') 
    // this.setState({data: 'nannsd'}); 
    this.state ={data: 'sds'}; 
    } 

hier

verwendet wird, ist mein Code http://codepen.io/naveennsit/pen/MydPJM

class App extends React.Component{ 
    constructor(){ 
    super(); 
    this.state ={data: 'test'}; 
    } 
    btnClick(){ 
    alert('---') 
    // this.setState({data: 'nannsd'}); 
    this.state ={data: 'sds'}; 
    } 

    render(){ 
    return <div> 
     hello {this.state.data} 
     <button onClick={this.btnClick}>click</button> 
    </div> 
    } 

} 

React.render(<App/>,document.getElementById('app')) 

Answer 1

Zwei Dinge:

1) Außerhalb der Konstruktor, sollten Sie setState (statt Zustand direkt Einstellung) aufrufen. Es sieht so aus, als hättest du das wahrscheinlich probiert, da es auskommentiert ist.

2) Sie müssen this binden, damit Sie den richtigen Wert innerhalb btnClick haben.

Hier ist eine schnelle Abzweigung von Ihrem Codepen mit dieser behoben. http://codepen.io/juliepagano/pen/xVNyrO

class App extends React.Component{ 
    constructor(){ 
    super(); 
    this.state ={data: 'test'}; 
    } 

    btnClick(){ 
    alert('---') 
    this.setState({data: 'nannsd'}); 
    // this.state ={data: 'sds'}; 
    } 

    render(){ 
    return <div> 
     hello {this.state.data} 
     <button onClick={this.btnClick.bind(this)}>click</button> 
    </div> 
    } 

} 

React.render(<App/>,document.getElementById('app'))