wz-react-dialog

使用方法

1. data : 传给dialog的json数据
2. methods : 传给dialog的回调函数，必须实现 close方法

class Shop extends React.Component{
    //构造函数
    constructor(props){
        super(props);
        this.state = {
            value : props.data.value
        };
    }
    componentWillReceiveProps(props){
        this.setState({
            value : props.data.value
        });
    }
    
    render(){
        if(!this.state){
            return (<div />);
        }
        return (
            <div className='shop'>
                <div className='dialog-hd'>
                    我的店铺
                </div>
                <div className='dialog-bd'>
                    你确定要{this.state.value}吗？
                </div>
                <div className='dialog-ft'>
                    <div className='btn btn-primary' onClick={this.props.methods.confirm}>确认</div>
                    <div className='btn btn-default' onClick={this.props.methods.close}>取消</div>
                </div>
            </div>
        )
    }
}

var ShopDialog = dialog(Shop);


class Page extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            shop : {
                show : false , 
                value : '喝咖啡'
            }
        }
    }

    render(){

        var self = this; 
        return (
            <div>
                {
                    this.state.shop.show && <ShopDialog data={{value : this.state.value}} methods={{
                        confirm : () => {
                            this.setState({
                                shop : {
                                    show : false
                                }
                            })
                        } , 
                        close : () => {
                            this.setState({
                                shop : {
                                    show : false
                                }
                            })
                        }
                    }} />
                }
                <button className='btn btn-primary' onClick={() => {
                    this.setState({
                        shop : {
                            show : true , 
                            value : '喝咖啡'
                        }
                    })
                }}>打开弹层</button>

            </div>
        );
    }
}