react 中 Modal 多次使用且带参数不同实现

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一.举例：对于 echatrs 的柱子分别需要弹窗带参数触发弹窗出现事件 showModalhref

myChart.on('click', (params) => {
switch (params.seriesIndex) {
// echarts 双柱1
case 0: this.showModalhref('kjxy', industryBar_list.list, params);
break;
// echarts 双柱2
case 1: this.showModalhref('cpxy', industryBar_list.list, params);
break;
default: break;
}
});

二、modal

state = {
modalShowHref: {
visibleHref: false,
type: '',
data1: [],
data2: {},
},
} <Modal
visible={this.state.modalShowHref.visibleHref}
onOk={this.okModalhref}
onCancel={this.hideModalhref}
okText="确认"
cancelText="取消"
width={278}
className={styles.hrefModal}
>
<p>确定跳转吗?</p>
</Modal>

三、点击onOk时

okModalhref = () => {
const { modalShowHref } = this.state;
const { type } = modalShowHref;
const { data1 } = modalShowHref;
const { data2 } = modalShowHref;
if (type === 'kjxy') { // 框架协议 (arr, params)
const obj = data1.find(t => t.name === data2.name);
const { corpCstTps } = obj;
this.props.dispatch(routerRedux.push({
pathname: '/QYGL/kjxy/query',
state: {
corpCstTps,
},
}));
} else if (type === 'cpxy') { // 产品协议 (arr, params)
const obj = data1.find(t => t.name === data2.name);
const { corpCstTps } = obj;
this.props.dispatch(routerRedux.push({
pathname: '/QYGL/cpxy/searchList',
state: {
corpCstTps,
},
}));
}
};