我正在使用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
关于reactjs - 如何在单击图标时将下拉列表添加到 react 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66316014/