一.舉例：對於 echatrs 的柱子分別需要彈窗 帶參數 觸發彈窗出現事件 showModalhref
1 myChart.on('click', (params) => { 2 switch (params.seriesIndex) { 3 // echarts 雙柱1 4 case 0: this.showModalhref('kjxy', industryBar_list.list, params); 5 break; 6 // echarts 雙柱2 7 case 1: this.showModalhref('cpxy', industryBar_list.list, params); 8 break; 9 default: break; 10 } 11 });
二、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, }, })); } };
四、點擊onCancel時
/////彈窗中 取消事件 hideModalhref = () => { this.setState({ modalShowHref: { visibleHref: false, type: '', data1: [], data2: {}, }, }); };