如何通过单击图标对表格列进行排序

Question

请在这个 CodeSandBox 中查看一个非常简单的 React 表格应用程序。 我想通过单击红色图标对“产品”列进行排序。 实际上，单击红色图标会在控制台中显示一条消息。 任何帮助将不胜感激。 提前感谢。

Answer 1

正如我在给你的评论中提到的。点击特定的箭头并不是一个好主意（尽管您可以显示一个箭头来指示当前排序的方向）。

首先，您需要将产品数组存储在反应钩子（useState）中。您可以通过修改来做到这一点：

const products = [{...},{...},...];

到

const [products, setProducts] = useState([{...},{...},...]);

您可以在这里

了解hooks

现在，您需要在排序时修改产品的状态，以便做出反应，以了解您的状态何时更新并重新渲染您的状态。所以你的产品看起来像这样，两个功能如下...... ->

const [products, setProducts] = useState([
    {
      id: 0,
      product: "Samsung Galaxy Tab A7 Lite 8.7",
      price: 119.35
    },
    {
      id: 1,
      product: "Motorola Moto G Stylus 5G",
      price: 149.99
    },
    {
      id: 2,
      product: "OnePlus Nord N30 5G",
      price: 299.59
    },
    {
      id: 3,
      product: "TCL 40XL 2023",
      price: 169.99
    }
  ]);

  const sortAscending = () => {
    const temp = [...products];
    temp.sort(function (a, b) {
      return a.product.localeCompare(b.product);
    });
    setProducts(temp);
  };
  const sortDescending = () => {
    const temp = [...products];
    temp.sort(function (a, b) {
      return b.product.localeCompare(a.product);
    });
    setProducts(temp);
  };

如果您在排序函数中注意到我正在创建产品数组排序的副本，然后用此副本更新产品的状态...这非常重要，因为如果您只更新产品引用或创建变量产品的引用并更新，react 不会检测到更改，也不会发生更新...您可以看到该数组被复制（而不是在我调用

const temp = [...products];

时引用，如果您还不知道，则

... 

是展开运算符，您可以在 here

阅读相关内容