Question

我创建了一张卡片，其中显示了已传递给我的数据，但是我必须使用按钮使用几个不同的过滤器对它们进行排序，顺序是从最高到最低，从最低到最高

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <handlers>
        <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
      </handlers>
      <aspNetCore processPath=".\XXX.exe" stdoutLogEnabled="true" stdoutLogFile=".\logs\stdout" hostingModel="InProcess" />
    </system.webServer>
  </location>
</configuration>

过滤器将是我放置的过滤器，分别为const menu = ( <Menu> <Menu.Item key="1" icon={<UserOutlined />}> 24 hours </Menu.Item> <Menu.Item key="2" icon={<UserOutlined />}> 48 hours </Menu.Item> <Menu.Item key="3" icon={<UserOutlined />}> 72 hours </Menu.Item> </Menu> ); function Menutop(props) { const [percent, setPercen] = useState(0); useEffect(() => { if (percent === 100) { setTimeout(() => { props.showTiendas(true); }, 1000); } else { props.showTiendas(false); } }, [percent, props]); return ( <> <Progress value={percent} onUpdate={setPercen} duration={16} /> <div className="flex items-center bg-dark-04 px-4 py-3"> <div className="flex w-3/12"> Name <BsArrowUpDown className="text-base ml-2" /> </div> <div className="flex w-1/6 justify-center items-center"> capacity <BsArrowUpDown className="text-base ml-2" /> </div> <div className="card flex w-1/12 justify-center items-center"> <Dropdown overlay={menu}> <Button> Capacity alert <DownOutlined /> </Button> </Dropdown> </div> <div className="flex w-1/6 justify-center items-center"> visitor <BsArrowUpDown className="text-base ml-2" /> </div> <div className="flex w-1/6 justify-center items-center"> Distancing alert <BsArrowUpDown className="text-base ml-2" /> </div> <div className="flex w-1/6 justify-center items-center "> Capacity alert <BsArrowUpDown className="text-base ml-2" /> </div> <div className="flex h-3 w-1/6"></div> <div onClick={() => { setPercen(0); }} className="w-1/12 flex justify-center items-center cursor-pointer bg-yellow" > <BsArrowRepeat className=" font-bold text-2xl" /> </div> </div> </> ); } export default Menutop;，name，capacity，Capacity alert，visitor和Distancing alert，只有Capacity alert会按字母顺序从最小变到最大，我仍然有一个按小时排序的按钮，我都不知道怎么做

这是我显示数据的地方

name

我显示数据的地方是一个组件，我将该数据发送给呼叫

这将是数据：

function Card(props) {
  const [open, setOpen] = useState(false);
  const trigger = useRef(null);


  useEffect(() => {
    if (trigger.current) {
      trigger.current.style.transition = "0.35s";
    }
  }, [trigger]);

  function toggleOpen() {
    if (trigger.current) {
      setOpen((open) => !open);
      if (open) {
        trigger.current.style.webkitTransform = "rotate(0deg)";
      } else {
        trigger.current.style.webkitTransform = "rotate(180deg)";
      }
    }
  }

  return (
    <div>
    <div className="w-full flex justify-center px-4 py-3">
      <div className="flex w-3/12 px-2 items-center">
        <div className="w-24 p-2 bg-dark-04 mr-4 rounded">
          <img src={props.store_logo} className="" alt="" />
        </div>
        <div className="flex flex-col justify-center ">
          <p className="font-semibold my-0">{props.store_name} </p>
          <p className="text-xs my-0">{props.store_address} </p>
        </div>
      </div>
      <div className="flex w-1/6 justify-center items-center px-2">
        <div className="w-4/5 h-10 bg-green bg-green-700 rounded text-white font-bold flex justify-center items-center">
          <p className="my-0 text-lg">{props.occupancy.occupancy}/{props.occupancy.capacity}</p>
          <p className="ml-2 my-0">{props.occupancy.percentage}%</p>
        </div>
      </div>
      <div className="flex w-1/12 justify-center">
        <Chart />
      </div>
      <div className="flex  w-1/6 justify-center items-center font-semibold">
        <p className="my-0 text-lg">{props.visits}</p>
      </div>
      <div className="flex justify-center items-center font-semibold w-1/6">
        <p className="my-0 text-lg">{props.alerts.conglomerations} Alertas</p>
      </div>
      <div className="flex justify-center items-center font-semibold w-1/6 ">
        <p className="my-0 text-lg">{props.alerts.occupancy} Alertas</p>
      </div>
      <div className="card flex justify-center items-center w-1/6">
        <Button className="mr-3">Analytics</Button>
        <Button>Alerts</Button>
      </div>
      <div className="w-1/12 flex justify-center items-center">
        <span
          ref={trigger}
          onClick={toggleOpen}
          className=" w-4/12 flex justify-center items-center"
        >
          <BsChevronUp className=" text-2xl" />
        </span>
      </div>
    </div>
    <Info open={open} {...props} />
    </div>
  );
}

export default Card;

Answer 1

您需要将数据作为数组包含在状态中。

完成此操作后，您必须创建一个函数，根据用户按下的按钮，将该数组重新分配为一个数组。

在最后一步，sort function将派上用场。

通过过滤器排序数据，反应js

1 个答案: