Изменить ключ состояния изменения?

Question

Я начал играть с React, и я застрял с этим образцом.

Счетчик работает, но почему onClick the BUTTON не меняет ключ активным в состоянии и отображает правильную кнопку?

Ссылка на 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

Потому что вы забыли определить click событие в Button компонентов используйте:

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

еще одна вещь, вам нужно определить событие щелчка с signout кнопки также, как это:

{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 
    }) 
} 

Проверить рабочий пример:

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

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

Answer 2

Ваша кнопка не принимает подпорку под названием OnClick, так что это нормально т шляпу он не делает ничего, попробуйте изменить свое определение этому и он должен работать

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

Answer 3

При загрузке на страницу this.state.active установлено значение false, поэтому отображается кнопка «Sign OUT», которая не имеет onCl ick. Я думаю, вы хотите, чтобы ваш код выглядел примерно так:

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