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

• Z时代
• 2024-01-10
• 分类：综合

一.举例：对于 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: {},
      },
    });
  };

以上是 react 中 Modal 多次使用且带参数不同实现 的全部内容， 来源链接： utcz.com/z/381818.html