新人，react 小问题

Question

问题已在图片提示。当checkbox被选中时，点击下一步按钮，可执行一个方法next（），当checkbox未被选中时，点击下一步，出现弹出框提示（自定义样式，非浏览器提供的alert），想知道如何实现？

Answer 1

React最经典的状态机你完全没用上，首先设置初始状态isCheck为false，然后根据用户点击来设定isCheck的值，根据isCheck的值来判断弹出框是否显示，不要用refs来获取dom元素的值了，代码如下:

var Section01 = React.createClass({
    getInitialState : function(){
        return {isCheck : false}
    },
    handleClick ：function(){
        this.setState({isCheck : !this.state.isCheck})
    },
    render : function(){
        return {
            <div>
                <input type="checkbox"  onClick={this.handleClick.bind(this)} />
                <div className={this.state.isCheck?" show" : "hide}>
                    你的弹窗,show和hide是你自己定义的显示和隐藏的样式
                </div>
            </div>
        }
    }
})

Answer 2

你的代码明显就思路不清，不是批评是建议一下。

1. 不要再用React.createClass，这旧语法了，改用ES6的类(Class)是时候了，不然明年看不懂别人写的代码了。

2. refs不是这样用的。你用refs取DOM元素，完全一个jQuery思维。React中的组件是人造的，事件也人造的，要取值checkbox有value可以取，也有onChange事件可以获取得到，再理解一下文档中怎么用会比较好。

Answer 3

最简单的方法就是render 里写一个div

render:function(){
        return (
            <div className={this.state.isShow==true?'show':'hide'}>弹出框</div>
        );
}

要显示就

this.setState({
    'isShow':true
})

反之false