Shopify Polaris：如何在 ActionList 中激活一个项目？

Question

我有一个包含一些内容的 ActionList。我想激活：单击某个项目时为真。我正在努力如何使用 Shopify Polaris 的 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: isClicked[i],

Shopify Polaris：如何在 ActionList 中激活一个项目？

Shopify Polaris: How to make an item active in ActionList?

shopify

reactjs

polaris