# 前端弹窗（使用高阶组件）开发步骤

1 定义弹窗 视图模型 (this.state.appmodel)

2 渲染视图 renderModel()

3 调用高阶组件，显示弹窗(this.props.modal.show("自己定义一个弹窗ID，后续 showModal时传入此ID即可"))

4 beSureBtnClick() 中

操作视图模型(this.state.appmodel) =》 更新视图(this.setState(this.state)) 



# 前端弹窗（使用高阶组件）Demo示例js

```js


/**
 * 弹窗示例
 */
class ApplicationPage extends Component {

    constructor(props) {

        super(props);

        /**
         * 创建state 模型
         */
        this.state = this.createState();

        /**
     	 * 适配版本变化,2105及其以后版本必须的调用, 之前版本不需要
     	 */
        this.props.use.form('你的表单ID，需要在模板上注册好，并且2111后需要使用use.form注册');
        
        
    }


    createState = () => {
        let state = {
            isPageReady:false,						 //页面是否可以进行渲染
            appmodal: {
                title: '新增节点',// 弹框表头信息
                beSureBtnClick: this.beSureBtnClick, //点击确定按钮事件
                cancelBtnClick: this.cancelBtnClick, //取消按钮事件回调
                userControl:true,  // 点 确定/取消 按钮后，是否自动关闭弹框.true:手动关。false:自动关,默认false
                size:'lg', //  模态框大小 sm/lg/xlg/xxlg/max 【className为junior/senior/combine和size不要同时配置】 
                noFooter : false, //是否需要底部按钮,默认有footer,有false,没有true
                rightBtnName : '取消', //左侧按钮名称,默认‘取消’
		        leftBtnName : '确定', //右侧按钮名称， 默认‘确定’
		        className:'junior', /*
		                       简单型junior -> 宽度410PX 高度200PX .【这个暂时别用，简单提示使用promptBox 或者 this.props.ncmodal的createModal】
		                       中型senior -> 宽度520PX 高度根据内容自适应，最小值268，最大高度限制420，如modal主体还要承modal主体区出现滚动条  
		                       复杂型combine  -> 宽度680PX 高度根据内容自适应，最小值268，最大高度限制570，如modal主体还要承载modal主体区出现滚动条
		                       头部和底部固定高度
		                       不写的话默认走size设定大小 
		                      */
		       hasBackDrop:true,//显示遮罩层，显示是true，不显示是false，默认是true
               zIndex:200,//遮罩的层级为zIndex，弹框默认为zIndex+1。默认为200，非比传项
               showCustomBtns:false,//允许自定义footer里的按钮,默认false显示 确定 和 取消 按钮，true是传入自定义的按钮
               customBtns:<div>自定义的一些按钮</div>, //JSX结构，样式需要自己写
               validateCloseBtn:false,//点击关闭按钮的校验,默认是false不校验，校验是true【不校验点击X关闭，校验执行传入的closeModalEve回调】，配置为true的时候esc不关闭
               hideRightBtn,//隐藏足部右边的按钮，默认是false不隐藏，隐藏是true
               hideLeftBtn,//隐藏足部左边的按钮，默认是false不隐藏，隐藏是true
               keyboard,//esc关闭modal，默认true
               bodyHeight,//modalbody的高度，用于定制modal的高度，如果用了此高度，size和classname的配置都会无法使用

            }
        }
        return state;   //返回state解构
    }
    

    
    beSureBtnClick = () => {
        
        //todo

    }

    /**
	 * 按钮弹窗按钮  调用此函数
	 */
	onShowModal = () => {
		
		this.props.modal.show("自己定义一个弹窗ID，后续 showModal时传入此ID即可")
	
	}

    /**
     * 获取数据 =>  填充数据 => demo
     */
    onDemo = () => {
       //获取界面数据
        getData(callback = (data) => {
            //填充model数据
            this.fillData({data:data, callback: (data) => {
                //todo
            }})
        })
    }


    /**
     * 获取数据  示例，具体看界面情况
     * @param {*} callback 
     */
    getData = (callback = () => {}) => {
        //调用获取数据的API或者接口等等
        //todo  fetchdata
        //拿到数据后
        callback && callback(fetchdata);
    }

    /**
     * 将获取到的数据填充到模态框中
     * @param {} params 
     */
    fillData = (params) => {
        let {data,callback} = params;

        //调用高阶组件或者，填充数据的APi，或者更新你的视图模型
        //todo...

        //看具体情况处理回调函数
        //setTimeout(callback,0);
        //callback && callback();
    }


    cancelBtnClick = () => {
        //todo....
    }

    
    render() {

        var { isPageReady } = this.state;

        if (!isPageReady) return ''; //页面资源加载完成后才能渲染页面
      
        /**
         * 此处如果是要渲染模板上的内容，需要等待模板加载完成后才可以继续渲染，比如上方的 isPageReady
         * @returns 
         */
        let renderModel = () => {
            const {modal } = this.props;
            let { createModal } = modal;
            let { appmodal } = this.state;

            /**
             * @returns 需要渲染的弹窗内容
             */
            let renderContent = () => {
                    // 获取创建表单API
                    let { createForm } = this.props.form;
                    return (
                        <div>
                            {
                                createForm('你的表单ID，需要在模板上注册好，并且2111后需要使用use.form注册',{

                                })
                            }
                        </div>
                    )
            }

            return(
                <div>
                    {
                        createModal('自己定义一个弹窗ID，后续 showModal时传入此ID即可',{
                            ...appmodal,
                            content: renderContent()
                        })
                    }
                </div>
                
            )
        }


        return <div>
                    {renderModel() /** 渲染弹窗**/}
               </div>

    }
}





```