用排序反应数据表列过滤问题答案

【问题标题】：react data table column filter problem with sort用排序反应数据表列过滤问题
【发布时间】：2021-03-26 18:02:56
【问题描述】：

我正在为我的项目使用反应数据表。目前我正在使用列过滤功能和列排序功能。这是我的表头。

 <thead>
  {headerGroups.map((headerGroup) => (
    <tr {...headerGroup.getHeaderGroupProps()}>
      {headerGroup.headers.map((column) => (
        <th {...column.getHeaderProps(column.getSortByToggleProps())}>
          {column.render("Header")}
          <span>
            {column.isSorted ? (
              column.isSortedDesc ? (
                <i class="mdi mdi-menu-down sort-arrow"></i>
              ) : (
                <i class="mdi mdi-menu-up sort-arrow"></i>
              )
            ) : (
              ""
            )}
          </span>
          <div>{column.canFilter ? column.render("Filter") : null}</div>
        </th>
      ))}
      <th>Action</th>
    </tr>
  ))}
</thead>

列过滤器和列排序功能正常工作。但我的问题是，当我单击列过滤器文本框时，列排序开始触发并排序标题。原因是所有元素都在同一个“th”内。我如何解决这个问题。

【问题讨论】：

标签： reactjs react-table

【解决方案1】：

我不确定这是否有帮助，因为 OP 似乎没有使用 FontAwesome，但我来到这里遇到了类似的问题并找到了这个解决方案：Failed to execute 'removeChild' on 'Node' with FontAwesome in React

【讨论】：

【解决方案2】：

改变这个

<th {...column.getHeaderProps(column.getSortByToggleProps())}>
          {column.render("Header")}
          <span>
            {column.isSorted ? (
              column.isSortedDesc ? (
                <i class="mdi mdi-menu-down sort-arrow"></i>
              ) : (
                <i class="mdi mdi-menu-up sort-arrow"></i>
              )
            ) : (
              ""
            )}
          </span>
          <div>{column.canFilter ? column.render("Filter") : null}</div>
        </th>

到

<th {...column.getHeaderProps()}>
<span  {...column.getSortByToggleProps()}>
          {column.render("Header")}
          <span>
            {column.isSorted ? (
              column.isSortedDesc ? (
                <i class="mdi mdi-menu-down sort-arrow"></i>
              ) : (
                <i class="mdi mdi-menu-up sort-arrow"></i>
              )
            ) : (
              ""
            )}
          </span>
</span>
          <div>{column.canFilter ? column.render("Filter") : null}</div>
        </th>

应该可以解决这个问题，基本上getSortByToggleProps返回排序相关的道具，所以你只需要在点击你想要排序的元素时将它们提供给那个元素

【讨论】：