如何在 child 组件中单击标题对 parent 组件中的列进行排序？

Question

问题是我不知道如何将效果从 parent 组件放到 child 组件... 我正在创建排序功能。

tableSort = (event, sortKey) => {
        const {data} = this.state;
        data.sort((a,b) => a[sortKey].localeCompare(b[sortKey]) )
        this.setState({ data })
    }

然后我试图在我的 table

中呈现它

render() {
    const {data} = this.state
    return (
        <>
            <Table>
                <Thead>
                    <Tr>
                        <Th onClick={e => this.tableSort(e, 'pool number')}>Pool Number</Th>
                        <Th>Sender</Th>
                        <Th>Not Routed Reason</Th>
                        <Th>Sent Date Time</Th>
                        <Th>Requested Delivery Report Mask Text</Th>
                        <Th>Delivery Report Received Date Time</Th>
                        <Th>isUnicode</Th>
                        <Th>MessageUUID</Th>
                    </Tr>
                </Thead>
                {this.renderData(data)}
            </Table>
        </>
    )
}

在这个组件中调用了child组件，就这样加锁了..

import React from 'react'
import { Tbody, Tr, Td } from 'react-super-responsive-table'

const TablePageList = ({data}) => {
    const {poolNumber, sender, notRoutedReason, sentDateTime, requestedDeliveryReportMaskText,
        deliveryReportReceivedDateTime, isUnicode, messageUUID} = data
        return (
            <Tbody>
                <Tr>
                    <Td>{poolNumber}</Td>
                    <Td>{sender}</Td>
                    <Td>{notRoutedReason}</Td>
                    <Td>{sentDateTime}</Td>
                    <Td>{requestedDeliveryReportMaskText}</Td>
                    <Td>{deliveryReportReceivedDateTime}</Td>
                    <Td>{isUnicode}</Td>
                    <Td>{messageUUID}</Td>
                </Tr>
            </Tbody>
        )
    }

export default TablePageList

那么我如何从 Th 访问和排序我的 Td？

Answer 1

您应该从父组件调用子组件。您没有调用任何子组件。

试试下面的代码。

导入子组件url。

import TablePageList from "./TablePageList";

然后保存状态数据。

 this.state = {
   data:[]
 }

同时更改函数 setState 和 order data。

tableSort = (event, sortKey) => {
  const {data} = this.state;
  data.sort((a,b) => a[sortKey].localeCompare(b[sortKey]) )
  this.setState({ data: data })
}

并调用下面的TablePageList组件</Thead>

render() {
const { data } = this.state;
return (
    <Table>
      <Thead>
        <Tr>
          <Th onClick={e => this.tableSort(e, "pool number")}>
            Pool Number
          </Th>
          <Th>Sender</Th>
          <Th>Not Routed Reason</Th>
          <Th>Sent Date Time</Th>
          <Th>Requested Delivery Report Mask Text</Th>
          <Th>Delivery Report Received Date Time</Th>
          <Th>isUnicode</Th>
          <Th>MessageUUID</Th>
        </Tr>
      </Thead>
      {data.map(element => {
        <TablePageList data={element}></TablePageList>;
      })}
    </Table>
);

}

然后你得到data并填充它。

const TablePageList = ({ data }) => {
  return (
    <Tbody>
      <Tr>
        <Td>{data.poolNumber}</Td>
        <Td>{data.sender}</Td>
        <Td>{data.notRoutedReason}</Td>
        <Td>{data.sentDateTime}</Td>
        <Td>{data.requestedDeliveryReportMaskText}</Td>
        <Td>{data.deliveryReportReceivedDateTime}</Td>
        <Td>{data.isUnicode}</Td>
        <Td>{data.messageUUID}</Td>
      </Tr>
    </Tbody>
  );
};

如何在 child 组件中单击标题对 parent 组件中的列进行排序？

How can I sort column in child component clicking on heading in parent component?

javascript

reactjs

react-bootstrap

react-bootstrap-table