javascript 在React Hooks中切换升序和降序

ut6juiuv 于 2023-02-18 发布在 Java

关注(0)|答案(2)|浏览(125)

我有一个切换按钮。当我点击按钮时，我是它按升序排序，当我第二次点击时，我想按降序排序。我也不能让它这样做...不确定它可能是什么。

const [data, setData] = useState([]); //hold all the data
  const [toggle, setToggle] = useState(false); //hold the state of the toggle

  const toggleTime = () => {
    let result = [];
    result = data.sort((a, b) => {
      return toggle
        ? a.order.deadline - b.order.deadline
        : b.order.deadline - a.order.deadline;
    });
    setToggle(result);
  };

JavaScript

来源：https://stackoverflow.com/questions/68376195/toggle-ascending-and-toggle-descending-in-react-hooks

2条答案

按热度按时间

uoifb46i1#

您可以使用data存储排序数据，toggle是布尔值，用于存储切换的sstate：

const toggleTime = () => {
  const newToggle = !toggle;
  setToggle(newToggle);
  setData((preData) =>
    preData.sort((a, b) => {
      return newToggle
        ? a.order.deadline - b.order.deadline
        : b.order.deadline - a.order.deadline;
    })
  );
};

赞(0）回复(0）举报 2023-02-18

b4lqfgs42#

//设置组件内部的顺序状态。

const [order, setOrder] = useState("ASC");

//在onClick切换/更改顺序按钮时切换/更改状态

<button
      onClick={() =>
        setOrder((prevState) => (prevState==="ASC"?"DESC":"ASC"))
      }
    >
      Change order
    </button>

赞(0）回复(0）举报 2023-02-18

我来回答

javascript 在React Hooks中切换升序和降序

2条答案

相关问题

热门标签

最新问答