首页>demo07

Demo07 - 状态机state by zuojj at 30 Jun 2016

state的每一次变化都会触发render

HTML

<div id="form"></div>

CSS

.button {
    display: inline-block;
    width: 100px;
    line-height: 30px;
    text-align: center;
    background-color: orange;
    color: #fff;
    cursor: pointer;
}
.button.disabled {
    background-color: #ccc;
    color: #aaa;
}

JAVASCRIPT

var ToggleButton = React.createClass({
    getInitialState: function() {
        return {disabled: false}
    },
    handleClick: function() {
        this.setState({disabled: !this.state.disabled});
    },
    render: function() {
        var classname = "button " + (this.state.disabled ? 'disabled' : '');
        return <span onClick={this.handleClick} className={classname}>我是按钮</span>
    }
});

ReactDOM.render(<ToggleButton/>, document.getElementById('form'));