Question

我正在创建一个表格，该表格使用箭头显示排序是升序还是降序。问题是，当我单击一列上的箭头时，所有箭头都会移动。我只想单击特定箭头的位置即可更改单击的列的方向。我正在尝试将单击的箭头与该逻辑的键值名称相匹配，这已经有一段时间了，并且似乎无法解决。有人可以指出我正确的方向

代码

library(dplyr)
df <- df %>% rename_with(~sub('.*\n', '', .))

Answer 1

首先，我建议您创建一个表头的硬编码对象，如下所示：

const tableHeaders = [{id: "clock", label: "Date"}, {id: "name", label: "Stock Name"}, ...] // and so on

一旦掌握了这一点，就可以使用以下命令简化所有th元素：

<thead>
  <tr>
    <th></th>
    {tableHeaders.map(({id, label}) => // destructuring value here
      <th key={id} onClick={() => sortTable(id)}>{label} <span><i onClick={() => sortTable(id)} className="fas fa-sort-up"></i></span></th>
  </tr>
</thead>

好吧，但是现在遇到了问题，您几乎不应该在每种情况下都使用普通js来定位DOM中的元素以更改其类，等等。那么如何在动态地进行响应时更改元素的className？

以此修改上面的代码：

<thead>
  <tr>
    <th></th>
    {tableHeaders.map(({id, label}) => // destructuring value here
      <th key={id} onClick={() => sortTable(id)}>{label} <span><i onClick={() => sortTable(id)} className={`fas fa-sort-up ${sortedColumns.includes(id) ? "arrowup" : ""`}></i></span></th>
  </tr>
</thead>

因此，您没有定义sortedColumns，因此需要一个状态，该状态是一个数组，其中包含所有已排序标头的ID。

const [sortedColumns, setSortedColumns] = useState([]) // no column sorted at first

最后，您应该修改sortTable以将已排序的列添加到数组中（或将其删除，也称为filter）。留给你：）

指定特定箭头以更改表中的排序

1 个答案: