如何解决单击图标时如何将下拉列表添加到反应表
我正在使用 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。