React使用antd组件Modal的两种方法

1、使用pubSub订阅（使用immutable.js）

发布

 onClick = () => {
        const form = Immutable.fromJS(this.state.resumeInfo)
        //这个form就是要传递过去的数据，后面的fromjs里的数据可以是你想传递的任何数据
        PubSub.publish(FORM_EDIT_MODAL_OPEN, { status: 'edit', form })
    }
    //发布的同时可以传递一个参数（此处是form），这里用的是immutable
    //可以深层次比较

订阅

state = {
        visible: false,
        // confirmLoading: false,
        status: 'add'
    }
    componentDidMount() {
        //订阅的事件 第二个事件是让模态框显示
        this.pubsub_token = []
        this.pubsub_token.push(PubSub.subscribe(FORM_EDIT_MODAL_OPEN, this.showModal))
    }
    handleCancel = () => {
        this.setState({
            visible: false
        })

    }
    // form是订阅模态框发布时传过来的值
    showModal = (msg, { status, form }) => {
        this.setState({
            visible: true,
            // confirmLoading: false,
            status,
            form
        }, () => {
            // 使用时需要将immutable类型转换成常规类型
            console.log(form.toJS());

        })
    }

immutable.js入门链接点击此处

2、使用redux

将this.showModal和this.closeModal放进redux仓库里，在点击的时候调用这两个函数

这段代码放在需要弹出的那个Modal里

componentDidMount () {
    const {dispatch} = this.props
    dispatch(setMeaTypeEditModal({
      show: this.showModal,
      close: this.closeModal
    }))
  }

这段代码放在有点击事件的文件里

const mapStateToProps = (state) => {
  return {
    meaTypeEditModal: state.meaTypeEditModal,
    meaEditModal: state.meaEditModal,
    meaType: state.meaType,
    meaList: state.meaList,
    selectedRow: state.selectedRow
  }
}
export default connect(mapStateToProps)(MainNav)

点击按钮时调用函数addMeaType

addMeaType = () => {
    const { meaTypeEditModal } = this.props
    let data = { id: '', meaTypeCode: '', meaTypeName: '', seqNo: '', title: '计量单位分类 - 新增' }
    meaTypeEditModal.show(data)
  }

Redux仓库

export const setMeaTypeEditModal = (data) => ({ type: SET_MEA_TYPE_EDIT_MODAL, data })

function meaTypeEditModal (state = {}, action) {
  switch (action.type){
    case actions.SET_MEA_TYPE_EDIT_MODAL:
      return action.data
    default:
      return state
  }
}