单击图标时如何将下拉列表添加到反应表

问题描述

我正在使用 react table 7.0，我如何添加和 iconColumn ，并且在点击它时，需要显示一个下拉列表。

 {
        Header: "",accessor: "actionColumn",disableSortBy: true,Cell: ({ original }) => (
           
            <div className="cursor__pointer ">
                <Icon className="padding5" iconName="RemoveLink" aria-hidden="true" />
            </div>
        )
    },

我可以像上面一样在列上渲染一个图标。如何在单击时呈现下拉列表？

解决方法

以下是一个示例，说明如何使用这个简单的 @trendmicro-frontend/react-dropdown 库执行此操作：

      {
        Header: "",accessor: "actionColumn",disableSortBy: true,Cell: ({ original }) => (

            <div className="cursor__pointer ">
              <Dropdown
                  onSelect={(eventKey) => {
                  }}
              >
                <Dropdown.Toggle btnStyle="link" noCaret
                >
                  <Icon className="padding5" iconName="RemoveLink" aria-hidden="true" />
                </Dropdown.Toggle>
                <Dropdown.Menu>
                  <MenuItem header>Header</MenuItem>
                  <MenuItem eventKey={1}>link</MenuItem>
                  <MenuItem divider />
                  <MenuItem header>Header</MenuItem>
                  <MenuItem eventKey={2}>link</MenuItem>
                </Dropdown.Menu>
              </Dropdown>
            </div>
        )
      },

这里有一个工作示例：

https://codesandbox.io/s/distracted-leftpad-c6onr?file=/src/App.js