reactjs中的通用按钮组件答案

【问题标题】：Generic button component in reactjsreactjs中的通用按钮组件
【发布时间】：2018-03-30 20:17:45
【问题描述】：

我开始使用 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"))

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

因为你忘记在Button 组件中定义click 事件，所以使用这个：

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

【讨论】：

非常感谢您的帮助
很高兴为您提供帮助:)

【解决方案2】：

您的按钮没有使用名为 onClick 的道具，因此它什么也不做是正常的，尝试将其定义更改为此它应该可以工作

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

【讨论】：

【解决方案3】：

页面加载时this.state.active 设置为 false，因此呈现“退出”按钮，该按钮没有 onClick 属性。我想你希望你的代码看起来像这样：

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

【讨论】：