2

我正在使用mdbreact包为我的数据制作表格。它在最后一列中有一个操作按钮，可打开用于编辑数据的模式。情景是

  1. 我用初始数据加载了表格
  2. 然后对其进行一些排序
  3. 现在我点击编辑按钮打开编辑数据的模式
  4. 现在排序被自动删除，模式正在打开并且数据在后台发生变化看起来真的很奇怪。

我需要什么 ？

我不希望在后端更改数据。此外，即使我mdbreact第一次使用，我也不知道如何将排序后的数据存储在状态中。

在这里，您可以检查我面临的确切问题。

我在其中格式化数据并向每一行添加事件和操作的文件：

import React from 'react'
import PayRatesTable from './PayRatesTable'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPencilAlt, faAngleRight, faAngleLeft } from '@fortawesome/free-solid-svg-icons'
import { Button, Row, Col } from 'reactstrap'
const columns =
[
    {
        label: 'Certificate',
        field: 'certificate',
        sort: 'asc'
    },
    {
        label: 'Speciality',
        field: 'speciality',
        sort: 'asc'

    },
    {
        label: 'Pay Rate ($)',
        field: 'pay_rate',
        sort: 'disabled'

    },
    {
        label: 'Weekend Pay Rate ($)',
        field: 'weekend_pay_rate',
        sort: 'disabled'

    },
    {
        label: 'Action',
        field: 'action',
        sort: 'disabled'

    }
]

const formatCertSpec = (data, certificates, handleModelClose) => {
var cert = []
data && data.map((item) => (
    certificates && certificates.map((certs) => {
        if (certs.id == item.certificateId) {
            certs.specialities && certs.specialities.map((certSpec) => {
                if (item.speciality == certSpec.id) {
                    cert.push({
                        certificate: certs.abbreviation,
                        speciality: certSpec.name,
                        pay_rate: item.payRateCents ? `$${(item.payRateCents / 100).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}` : '',
                        weekend_pay_rate: item.weekendPayRateCents ? `$${(item.weekendPayRateCents / 100).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}` : '',
                        action: <Button color="link" onClick={(event) => {
                            event.preventDefault()

                            handleModelClose({
                            certificate: certs.abbreviation,
                            speciality: certSpec.name,
                            id: item.id,
                            pay_rate: item.payRateCents / 100,
                            weekend_pay_rate: item.weekendPayRateCents / 100,
                        })}}>
                            <FontAwesomeIcon key="edit" className="ml-2" icon={faPencilAlt} />
                        </Button>
                    })
                }
            })
        }
    })
))
return cert
}

function AddPayRatesComp({
data,
certificates,
handleModelClose,
handleNextPrevTabs
}) {
const certAndSpecPayData = formatCertSpec(data, certificates, handleModelClose)
console.log(certAndSpecPayData)
return (
    <div className="container-fluid">
        <PayRatesTable
            columns={columns}
            certificates={certificates}
            certs={certAndSpecPayData}
        />
        <Row className="mb-2 text-center">
            <Col className="col-md-3">
            </Col>
            <Button
                type="button"
                onClick={() => handleNextPrevTabs('prev')}
                outline
                color="secondary"
                className="btn-rounded font-weight-bold py-1 mr-2 mt-2 col-sm-12 col-md-3"
            ><FontAwesomeIcon icon={faAngleLeft} /> Previous</Button>
            <Button
                type="button"
                onClick={() => handleNextPrevTabs('next')}
                outline
                color="secondary"
                disabled
                className="btn-rounded font-weight-bold py-1 mr-2 mt-2 col-sm-12 col-md-3"
            >Next <FontAwesomeIcon icon={faAngleRight} /></Button>
        </Row>
    </div>
);
}

export default AddPayRatesComp;

PayRatesTable.js

import React from 'react'
import { MDBDataTable } from 'mdbreact'

const PayRatesTable = ({ columns, certs }) => {
const data = {
columns: columns,
rows: certs
}

return (
<>
  <MDBDataTable
    striped
    bordered
    medium="true"
    responsive
    data={data}
    order={['certificate', 'asc' ]}
  />
  <style jsx global>{`
      @import "../styles/bootstrap-custom/jsx-import";
      .table thead:last-child{
        display:none;
      }
    `}</style>
</>
);
}

export default PayRatesTable;

由于安全问题，我只能提供这些。

4

0 回答 0