react.js - 新人，react 小问题

问题描述

问 题

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

解决方案

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

这篇关于react.js - 新人，react 小问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！