在未单击的情况下调用MUI DataGrid中的按钮ONCLICK
我在MUI V5 DataGrid中实现了一个按钮。基于官方样本 https://mui.com/x/x/ React-Data-Grid/columns/#Render-cell ,我在按钮中添加了onclick。
首次渲染单元格而不是单击事件时,调用了OnClick功能。
const downloadSearchResult = (params) => {
const link = document.createElement("a");
link.download = "download.txt"
link.href = "./download.txt";
link.click();
}
const notes = [
{id: 1, Search_result: "download.txt" },
{id: 2, Search_result: "pending" },
{id: 3, Search_result: "pending" },
]
export default function Notes() {
var show
const columns: GridColDef [] = [
{ field: 'Search_result', headerName: 'Search result', width: 150,
renderCell: (params) => (
<strong>
{show = (params.value == "Pending")}
{show && params.value}
{{!show &&
<Button
variant="contained" size="small"
onClick={downloadSearchResult(params)}
>
Download
</Button>}}
</strong>
)
},
];
return (
<Container>
<div>
<DataGrid rows={notes} columns={columns} />
</div>
</Container>
)
}
呼叫堆栈中的onClick函数:
in Mui v5 datagrid:
I implemented a button inside the MUI v5 Datagrid. Based on the official sample https://mui.com/x/react-data-grid/columns/#render-cell , I added the onClick in the Button.
The onClick function was called when the cell was rendered for the first time instead of clicking event.
const downloadSearchResult = (params) => {
const link = document.createElement("a");
link.download = "download.txt"
link.href = "./download.txt";
link.click();
}
const notes = [
{id: 1, Search_result: "download.txt" },
{id: 2, Search_result: "pending" },
{id: 3, Search_result: "pending" },
]
export default function Notes() {
var show
const columns: GridColDef [] = [
{ field: 'Search_result', headerName: 'Search result', width: 150,
renderCell: (params) => (
<strong>
{show = (params.value == "Pending")}
{show && params.value}
{{!show &&
<Button
variant="contained" size="small"
onClick={downloadSearchResult(params)}
>
Download
</Button>}}
</strong>
)
},
];
return (
<Container>
<div>
<DataGrid rows={notes} columns={columns} />
</div>
</Container>
)
}
onClick function in Call Stack:
Button in MUI v5 Datagrid:
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
尝试
try