Javascript 用于更改表中排序的特定于目标的箭头

我正在创建一个表，该表使用箭头显示排序是升序还是降序。问题是，当我单击一列上的箭头时，所有箭头都会移动。我想知道单击的特定箭头只会更改我单击的列的方向。我正在尝试将单击的箭头与th的键值的名称相匹配。我已经在这个逻辑上工作了一段时间，但似乎无法将其取下。有人能给我指出正确的方向吗

代码

const sortTable=（键）=>{
设置端口方向（！sortDirection）；
const clonedpoptions=[…列表选项]；
clonedOptions.sort（（a，b）=>{
返回排序方向？a[键]-b[键]：b[键]-a[键]；
})
console.log（键）
设置选项列表（克隆选项）；
常量箭头=document.querySelectorAll（'.fas'）
arrows.forEach（arrow=>{
if（sortDirection==true）{
arrow.classList.add（'arrowup'）
}else if（sortDirection==false）{
arrow.classList.remove（'arrowup'）
}
})
}
sortTable（'clock'）}>日期
sortTable（'name'）}>股票名称sortTable（'name'）}className=“fas fa排序”>
sortTable（'price'）}>选项的价格sortTable（'price'）}className=“fas fa排序”>
sortTable（'amountfooptions'）}>可排序的选项数（'amountfooptions'）}className=“fas fa sort up”>
sortTable（'TotalAmountSpeed'）}>花费总额sortTable（'TotalAmountSpeed'）}className=“fas fa排序”>
sortTable（'optionPriceSoldAt'）}>在sortTable（'optionPriceSoldAt'）}className=“fas fa sort up”>
sortTable（'AMONTOFOPTIONSALL'）}>出售的期权sortTable（'AMONTOFOPTIONSALL'）}className=“fas fa sort up”>
排序表（'totalProfit'）}>Proft排序表（'totalProfit'）}className=“fas fa排序”>
{listOfOptions.map（（选项）=>{
返回(
deleteOption（option.id）}>x
{option.clock}
{option.name.toUpperCase（）}
${option.price}
{option.amountOfOptions}
${option.TotalAmountSpeed.toFixed（2）}
${option.optionPriceSoldAt}
{option.amountofoptionssell}
=0？'green'：'red'}>${option.totalProfit.toFixed（2）}
)
})}

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

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>

<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>

---

最后，您应该修改

sortTable

，将已排序的列添加到数组中（或者删除它们，也称为

filter

）。将此留给您：）

仅供参考，在函数开头调用

setSortDirection

并不意味着

sortDirection

已在以下代码行中更新。它是asynchronous@John鲁德尔，嗨，这是什么意思？我想你的具体问题是选择箭头的逻辑

document.querySelectorAll（'.fas'）

将显示所有箭头。当你真的想要一个的时候。为什么不将活动筛选器存储在组件状态，并在确定要排序的行/要旋转的箭头时重用该组件状态？

<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>

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