reactjs - 单击 Booststrap 表上的按钮后打开 Reactstrap Modal 并显示数据

Question

我想从与 Bootstrap 表（父组件）相同的客户数据（本地 json 文件）中获取 ID，并使用该获取数据（客户、product_usage 等）在模态（子组件）上显示。

这是 Reactstrap Modal 组件代码

import React, {createRef, Fragment,  useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Media, CustomInput, Row} from 'reactstrap';
// import { List, Datagrid, TextField } from 'react-admin';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import ScrollBarCustom from '../common/ScrollBarCustom';
import Flex from '../common/Flex';
import accuracyIcon from '../../assets/img/icons/accuracy-icon.png';
import BootstrapTable from 'react-bootstrap-table-next';
import customers  from '../../data/customer-health/customerHealth';


function BasicModalExample ({data}) {
  const [collapseOne, collapseOneOpen] = useState(false);

  return (
    <Fragment>
      <Button color="falcon-default" 
        onClick={() => collapseOneOpen(!collapseOne)}>
        <FontAwesomeIcon icon="chevron-right" />
      </Button>
      <Modal 
        modalClassName="overflow-hidden modal-fixed-right modal-theme"
        className="modal-dialog-vertical"
        contentClassName="vh-100 border-0"
        isOpen={collapseOne} toggle={() => collapseOneOpen(!collapseOne)}>
        <ModalHeader tag="div" className="modal-header-settings">
          <div className="py-1 flex-grow-1">
            <h2 className="text-white">
              <FontAwesomeIcon icon="building" className="mr-2 fs-0" />
              {data}
              {/* {customers.id} */}
              
              {/* <TextField source="customers.customer" /> */}
              
            </h2>
            {/* <p className="mb-0 fs--1 text-white opacity-75">Set your own customized style</p> */}
          </div>
        </ModalHeader>
        <ScrollBarCustom
          className="modal-body"
          contentProps={{
            renderer: ({ elementRef, ...restProps }) => (
              <span
                {...restProps}
                ref={elementRef}
                // className={classNames('p-card position-absolute', { 'border-left': isDark })}
              />
            )
          }}
        >
        <ModalBody className="px-card">
          <Flex justify="between">
            <Media className="flex-grow-1">
              <img src={accuracyIcon} alt="" width={70} className="mr-2" />
              <Media body>
                <h4 className="fs-0">Is this prediction accurate?</h4>
                {/* <p className="fs--1 mb-0">Switch your language direction </p> */}
                <Button size="sm" onClick={() => collapseOneOpen(!collapseOne)}> NO </Button>
                <Button size="sm" color="primary">YES</Button>
              </Media>
            </Media>
          </Flex>  
         {/* Woohoo, you're reading this text in a modal! */}
        </ModalBody>

        <ModalFooter>
          <Button onClick={() => collapseOneOpen(!collapseOne)}>
            Close
          </Button>
          <Button color="primary">Save changes</Button>
        </ModalFooter>
        </ScrollBarCustom>
      </Modal>
    </Fragment>
  );
}

export default BasicModalExample;

这是一个 Bootstrap 表，它显示来自客户 JSON 文件的数据和每行的一个按钮。

<div className="table-responsive">
                  <BootstrapTable
                    ref={table}
                    bootstrap4
                    keyField="id"
                    data={customers}
                    // data={custhealth}
                    columns={columns}
                    // rowEvents={rowEvents}
                    selectRow={selectRow(onSelect)}
                    bordered={false}
                    classes="table-dashboard table-striped table-sm fs--1 border-bottom mb-0 table-dashboard-th-nowrap"
                    rowClasses="btn-reveal-trigger"
                    headerClasses="bg-200 text-900"
                    {...paginationTableProps}
                  />
                </div>

并使用上述模式作为按钮的格式化程序，通过单击按钮打开模型。

const sidepanelFormatter = () => {
  return (
    <Fragment>
      <BasicModalExampledata={customers} />
    </Fragment>
  );
};

标签： reactjsbootstrap-modal