React 表正在过滤器上排序

Question

我正在为我的项目创建一个网格，我需要在其中实现列过滤。我已经完成了大部分工作，但面临一个问题，那就是每当我单击 ID 列的过滤器输入框时，该列就会被排序。我尝试过使用，e.stopPropagation()但这不起作用。

我的代码库的工作副本可以在https://4hz20.csb.app/找到，代码可以在https://codesandbox.io/s/data-table-forked-4hz20找到

ColumnFilter.js

import React from "react";
import styled from "styled-components";

const Input = styled.input`
  width: 144px;
  margin: 8px 0;
  padding: 12px;
  border: solid 1px #c2c3c9;
  background-color: #ffffff;
`;

export const ColumnFilter = ({ column }) => {
  const { filterValue, setFilter } = column;
  return (
    <Input
      value={filterValue || ""}
      onChange={(e) => {
        e.stopPropagation();
        setFilter(e.target.value);
        return false;
      }}
      placeholder="Search"
    />
  );
};

另外我正在使用manualFilters: true,manualSortBy: true因为manualPagination: true我想在服务器端处理它们，但手动排序和手动过滤似乎不能一起工作，请参阅DataGrid.js第 37-39 行。

Answer 1

我改变了代码

\n

<th scope="col" {...column.getHeaderProps(column.getSortByToggleProps())}>\n    {column.render("Header")}\n    <span>\n        {column.disableSortBy ? "" : column.isSorted n? column.isSortedDesc ? " " : "  " : " \xe2\x87\xb5"}\n    </span>\n    <div>\n        {column.canFilter ? column.render("Filter") : null}\n    </div>\n</th>\n

\n

到

\n

<th scope="col">\n    <div {...column.getHeaderProps(column.getSortByToggleProps())}>\n        {column.render("Header")}\n        <span>\n            {column.disableSortBy ? "" : column.isSorted n? column.isSortedDesc ? " " : "  " : " \xe2\x87\xb5"}\n        </span>\n    </div>\n    <div>\n        {column.canFilter ? column.render("Filter") : null}\n    </div>\n</th>\n

\n

将所需的元素包装在 div 中并传递{...column.getHeaderProps(column.getSortByToggleProps())}给它。

\n