弹窗是选择表格的组件，并返回选中数据

父

import React, { Component } from 'react';
import {
  Table,
  Form,
} from 'antd';


//api
import {
  postLicensePlate, // 查询有效车牌列表
} from '@/api/testing.js';

//组件
import SelectTable from '@/components/modal/SelectTable'; //取消测试计划组件

//样式
import Style from './index.less';

const licensePlateColumns = [
  {
    title: '牌照号码',
    dataIndex: 'licensePlate',
    key: 'licensePlate',
  },
  {
    title: '发动机号',
    dataIndex: 'engineCode',
    key: 'engineCode',
  },
  {
    title: '测试车辆vin码',
    dataIndex: 'vin',
    key: 'vin',
  },
  {
    title: '车辆类型',
    dataIndex: 'carType',
    key: 'carType',
  },
];

const SafetyOfficerColumns = [
  {
    title: '姓名',
    dataIndex: 'driverName',
  },
  {
    title: '驾驶证号',
    dataIndex: 'idCard',
  },
  {
    title: '手机号',
    dataIndex: 'telephone',
  },
];

export default class add extends Component {
  constructor(props) {
    super(props);
    this.state = {
      licensePlateArr: [], // 选择测试牌照数组
      selectTableType: 0, // 选中表格类型
      modalData: [], // 选中状态表格数据
    };
  }
  // 获取子函数ref
  onRef = (ref) => {
    this.child = ref;
  };

  // 给表数据添加key值
  addKey(data) {
    var len = data.length;
    if (len) {
      for (var i = 1; i < len + 1; i++) {
        data[i - 1].key = i;
      }
    }
    return data;
  }

  
  // 打开选择测试牌照的弹窗，点击调用子函数的showModal（）方法
  licensePlateClick = (e) => {
    // 查询有效车牌列表
    postLicensePlate().then((res) => {
      this.addKey(res.data || []);
      this.setState({
        selectTableType: 1,
        modalData: this.addKey(res.data || []),
      });
      this.child.showModal();
    });
  };
 

  // 分别得到选中后的表格的数据
  changeData = (newData) => {
    if (this.state.selectTableType === 1) {
      this.setState({
        licensePlateArr: newData,
      });
    }
  };
  
  render() {
    return (
      <div id={Style.TestPlanAdd}>

        <Form
          ref="planForm"
          name="wrap"
          labelCol={{ flex: '110px' }}
          labelAlign="left"
          labelWrap
          wrapperCol={{ flex: 1 }}
          colon={false}
        >
          <Form.Item
            name="licensePlate"
            label="选择测试牌照"
            extra={
              this.state.licensePlateArr.length ? (
                <div
                  onClick={this.licensePlateClick}
                  className={Style.reselect}
                >
                  重新选择
                </div>
              ) : (
                ''
              )
            }
          >
            {this.state.licensePlateArr.length ? (
              <Table
                rowKey={(record) => record.licensePlate}
                pagination={false}
                columns={licensePlateColumns}
                dataSource={this.state.licensePlateArr}
              />
            ) : (
              <p
                className={Style.select_table}
                onClick={this.licensePlateClick}
              >
                选择测试牌照{this.state.selectTableType}
              </p>
            )}
          </Form.Item>

        </Form>



        <SelectTable
          onRef={this.onRef}
          changeData={this.changeData}
          modalData={this.state.modalData}
          columns={
            this.state.selectTableType === 1
              ? licensePlateColumns
              : SafetyOfficerColumns
          }
        />
      </div>
    );
  }
}

子

import React, { Component, useState } from 'react';
import { Modal, Table, Button } from 'antd';

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalVisible: false, // 显示弹窗变量
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      sendData: [],
    };
  }
  componentDidMount() {
    this.props.onRef(this);
  }

  // 打开表格弹窗
  showModal = () => {
    this.setState({
      isModalVisible: true,
    });
  };

  // 点击确定，筛选得到选中表格数据，并传给父组件并关闭弹窗
  handleOk = (e) => {
    var dateArr = this.props.modalData.filter((item) => {
      if (
        this.state.selectedRowKeys.find((val) => {
          if (val === item.key) {
            return val;
          }
        })
      ) {
        return item;
      }
    });

    // 修改父组件的显示表格数据
    this.changeData2(dateArr);
    // 关闭弹窗
    this.setState({
      isModalVisible: false,
      sendData: dateArr,
      selectedRowKeys: [],
    });
  };

  // 修改父组件的显示表格数据
  changeData2 = (dateArr) => {
    this.props.changeData(dateArr);
  };

  // 关闭取消弹窗
  handleCancel = () => {
    this.setState({
      isModalVisible: false,
    });
  };

  // 刷新
  start = () => {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      });
    }, 1000);
  };

  // 选中表格数据的key数组
  onSelectChange = (selectedRowKeys) => {
    this.setState({
      selectedRowKeys: selectedRowKeys,
    });
  };

  render() {
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (
      <div>
        {/* this.state.isModalVisible */}
        <Modal
          centered={true}
          visible={this.state.isModalVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width={600}
        >
          <div>
            <div style={{ marginBottom: 16 }}>
              <Button
                type="primary"
                onClick={this.start}
                loading={loading}
                disabled={!hasSelected}
              >
                刷新
              </Button>
            </div>
            <Table
              rowSelection={rowSelection}
              columns={this.props.columns}
              dataSource={this.props.modalData}
            />
          </div>
        </Modal>
      </div>
    );
  }
}

export default Child;