Shopify Polaris:如何在ActionList中激活项目？

Question

我有一个ActionList，里面有一些内容。我想要使活动:真时，一个项目被点击。我很难用Shopify的ActionList来实现它。我可以得到我点击的索引。但我不知道如何将索引用于active: true和where。如果你能给我一些建议的话，这真的对我有帮助。

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>
  );
}

https://codesandbox.io/embed/lively-tdd-fp49cl?fontsize=14&hidenavigation=1&theme=dark

Answer 1

忘记将索引放在active属性中。

            active: isClicked[i],