Shopify Polaris：如何使ActionList中的项目活跃？

Question

我有一个具有一些内容的动作清单。 我想使活动活动：单击项目时为TRUE。 我正在努力使用Shopify Polaris的动作清单来做到这一点。 我可以得到我点击的索引。但是我不确定如何将索引使用到Active：true和在哪里。 如果您能给我一些建议，那确实对我有帮助。

import React, { useCallback, useState } from "react";
import { ActionList, Button, Icon, Popover } from "@shopify/polaris";
import { TickSmallMinor, ImportMinor } from "@shopify/polaris-icons";

const actions = [
  {
    content: "Import file"
  },
  {
    content: "Export file"
  },
  {
    content: "Export file2"
  },
  {
    content: "Export file3"
  },
  {
    content: "Export file4"
  }
];

export default function ActionListWithSuffixExample() {
  const [active, setActive] = useState(true);
  const [isClicked, setIsClicked] = useState(Array(actions.length).fill(false));
  console.log(actions.length);

  const toggleActive = useCallback(() => setActive((active) => !active), []);

  const activator = (
    <Button onClick={toggleActive} disclosure>
      More actions
    </Button>
  );

  const handleClick = (index) => {
    console.log("index", index);
    setIsClicked((prev) => [
      ...prev.slice(0, index),
      !prev[index],
      ...prev.slice(index + 1)
    ]);
  };

  return (
    <div style={{ height: "200px" }}>
      <Popover
        active={active}
        activator={activator}
        autofocusTarget="first-node"
        onClose={toggleActive}
      >
        <ActionList
          actionRole="menuitem"
          items={actions.map((a, i) => ({
            onAction: () => handleClick(i),
            active: isClicked,
            content: a.content,
            icon: ImportMinor,
            suffix: <Icon source={TickSmallMinor} />
          }))}
        />
      </Popover>
    </div>
  );
}

Answer 1

您忘了将索引放在活动属性中

            active: isClicked[i],