Javascript 如何使增加箭头和减少箭头在排序时起反应

我已经做了一个表格，我现在可以对多个列进行排序。我想要的是，在点击一个特定的按钮后，我在按钮上得到一个递增符号，如果再次点击按钮，在按钮上得到一个递减符号。下面是我的函数代码，该函数改变了列和方向，并以按钮为例

function change(set){
      let direction='asc';
      if(sortOrder==='asc'){
        direction='desc';
      }
      setSortBy(set);
      setSortOrder(direction);
    }

<table>
<th><button onClick={()=>change('name')}>
                     Name
                    </button></th>
<th><button onClick={()=>change('total')}>
                    Total
                    </button></th>
</table>

功能更改（设置）{
让方向=asc'；
如果（排序器==='asc'）{
方向class='desc'；
}
setSortBy（set）；
设置顺序（方向）；
}
更改（'name'）}>
名称
更改（'total'）}>
全部的

---

因此，任何人都可以向我展示如何实现箭头

来进行简单的表内容排序，请尝试数据表。

---

例如：

您应该在状态中维护列排序顺序。单击列/按钮时，将更新状态，更改将反映在渲染中。使用数据属性标识列/按钮。而且，除非您对项目中的任何其他内容使用单独的CSS库，否则只需使用unicode向上/向下箭头即可

const{useState}=React；
函数示例（）{
//使用对象来维护列排序顺序
const[order，setOrder]=useState（{name:'asc'，total:'asc'}）；
函数handleClick（{target}）{
//不是将处理程序附加到每个按钮，
//桌子上有一个，我们只需要检查一下
//我们点击的元素是一个按钮。
如果（target.nodeName==='BUTTON'）{
//从数据属性中获取类型（名称、总数等）
常量{dataset:{type}}=target；
//设置新订单的状态
设置顺序（上一个=>{
const newOrder=prev[type]=“asc”？“desc”：“asc”；
返回{…prev[type]：newOrder}；
});
}
}
//返回箭头
函数getArrow（顺序）{
如果（订单=='asc'）返回'↑';
返回'↓';
}
返回(
名称{getArrow（order.Name）}
总计{getArrow（order.Total）}
);
};
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);

我的问题答对了吗？所以，如果你按递增顺序排序，它应该显示向上箭头，否则向下箭头？是的，你是对的，但它应该显示我当前单击的特定列，这将不是我的用途，因为我的数据输出取决于用户切换。如果我可以编写箭头功能，会更好。最初，我想将所有箭头功能都保留在默认值中，我不知道这意味着什么。