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());
})
}
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
}
}
版权声明:本文为qq_46503396原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。