做一个复用的开发组件 modal弹出框

使用弹出框组件

<div onClick={this.handleClick2}>弹出modal22</div>

      <NewMode

        data={<p>测试modal22</p>}

        title='modal222'

        visible={this.state.wtcgVisible2}

        modalProps={{

on:{

  onOk: (data) =>{ this.onOkFun2(data) },

  onCancel:(data) =>{ this.onCancelFun2(data) }

}

}}

 />

开发弹出框组件

handleEvent = (args) =>{

// 传入事件处理

let newRows = {};

let handlersObj = this.props.modalProps.on;

let handlers = Object.keys(handlersObj);

let self = this;

handlers.forEach(name =>{

  if(['onChangeHandle'].indexOf(name) === -1){

  // 非dom事件过滤

  newRows[name] = (e) =>{

    handlersObj[name]({e, ...args});

    self[`${name}Handle`] && self[`${name}Handle`](args);

}

}

});

return newRows;

};

render(){

return(

  <div>

  <Modal

    title={this.props.title}

    visible={this.props.visible}

    closable={false}

    centered={true}

    okText='确认'

    onCancelText='取消'

    className={'titleCenter oneButton'}

    {...this.handleEvent({data:'这是mode'})}

>

    {this.props.data}

  </Modal>

  </div>

)

}