Question

我开始玩React并且我坚持使用这个样本。

计数器有效，但为什么onClick BUTTON不会改变状态中的键活动并呈现正确的按钮？

  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

你的按钮没有采用名为onClick的道具所以它是正常的，它没有做任何事情，尝试将其定义更改为它并且它应该工作

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

Answer 2

因为您忘记在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 3

在页面加载this.state.active设置为false，因此＆＃34; Sign OUT＆＃34;按钮呈现，没有onClick属性。我想你希望你的代码看起来像这样：

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

reactjs中的通用按钮组件

3 个答案: