Change-State-Taste drücken?

Question

Ich begann mit React spielen und ich bin mit diesem Beispiel fest.

Zähler funktioniert, aber warum onClick die Schaltfläche nicht aktiv Schlüssel im Zustand und rendern richtige Schaltfläche?

Link zu CodePen

const Button = ({label}) => (
    <button className="btn btn-primary">{label}</button> 
); 

const Counter = React.createClass({ 

    getInitialState: function() { 
     return { 
      counter: 0, 
      active: false 
     } 
    }, 

    increment: function() { 
     this.setState({ 
      counter: this.state.counter + 1 
     }) 
    }, 

    change: function() { 
     this.setState({ 
      active: true 
     }) 
    }, 

    render: function() { 
     return (
       <div> 
        <h1>Counter: {this.state.counter}</h1> 
        <button onClick={this.increment}>1+</button>} 
        {this.state.active ? 
        <Button label="Sign OUT"/> : 
        <Button label="Sign in" onClick={this.change}/>} 
       </div> 
     ) 
    } 
}); 

ReactDOM.render(<Counter/>, document.getElementById("root")) 

Answer 1

arbeiten

Weil Sie click Ereignis zu definieren, vergessen in Button Komponente verwenden:

const Button = (props) => (
    <button className="btn btn-primary" onClick={props.onClick}>{props.label}</button> 
); 

eine weitere Sache, müssen Sie das Click-Ereignis mit signout Taste auch so definieren:

{this.state.active ? 
    <Button label="Sign OUT" onClick={this.change}/> : 
    <Button label="Sign in" onClick={this.change}/> 
} 

change: function() { 
    this.setState({ 
     active: !this.state.active 
    }) 
} 

prüfen Arbeitsbeispiel:

jsfiddle: https://jsfiddle.net/mtbg3g59/

Codepen: http://codepen.io/anon/pen/WRLgpp

Answer 2

Ihre Schaltfläche, um eine Stütze nicht nehmen genannt onClick so es normal t Hut macht es nichts, versuchen, seine Definition zu, dies zu ändern und es sollte

const Button = ({label}, {onClick}) => (
    <button className="btn btn-primary" onClick={onClick}>{label}</button> 
); 

Answer 3

Beim Laden der Seite this.state.active wird auf false gesetzt, daher wird die Schaltfläche "Sign OUT" gerendert, die keine onCl hat ick-Attribut Ich denke, dass Sie Ihren Code möchte etwas wie folgt aussehen:

{this.state.active ? 
       <Button label="Sign OUT" onClick={this.change}/> : 
       <Button label="Sign in"/>}