我单击按钮后打开表

Question

我正在做一个反应程序，我想在单击按钮后显示权限列表。 现在，我正在使用window.alert显示信息，但我想在更漂亮的列表中显示它。

我按下的按钮：

现在显示的内容（一次将列表中的所有元素打印一次）：

当我单击该按钮时，我希望列表的所有元素以这种方式显示：

有什么办法吗？

Answer 1

您可以在render方法中结合使用react-bootstrap Popover和ListGroup组件。

const popover = (
  <Popover id="popover-permission" title="Permissions">
    <ListGroup>
      <ListGroup.Item>Permission 1</ListGroup.Item>
      <ListGroup.Item>Permission 2</ListGroup.Item>
      <ListGroup.Item>Permission 3</ListGroup.Item>
    </ListGroup>
  </Popover>
);

return <OverlayTrigger trigger="click" placement="bottom" overlay={popover}>
  <Button variant="secondary">Show Permissions</Button>
</OverlayTrigger>