我正在我们正在进行的项目中使用材料表。我需要覆盖材料表的添加按钮（+ 按钮）和编辑按钮（在所附的示例图像中标记），而不是材料表的内联添加/编辑功能我想要一个对话框（我的自定义组件）应该弹出用户将在其中输入他们的数据，然后单击保存按钮将执行 API 调用。
有没有办法做到这一点？我可以使用 Materialtable 的 EditRow props吗？如果是的话，有人可以举一个关于如何使用 EditRow 的小例子吗？
如何覆盖react材料表的操作按钮
IT技术
reactjs
material-table
2021-05-04 08:14:25
1个回答
我使用 Material-Table 贡献者 Matt Oestreich 提供的以下解决方案解决了这个问题。我必须将 Actions 属性与我的自定义 onClick 处理程序一起使用以进行自定义编辑，并且类似地在 actions 属性中将 set isFreeAction 添加为 true。
示例代码框演示 对于自定义编辑操作，传递如下所示的操作属性：
<MaterialTable
// other props
actions={[
{
icon: 'edit',
tooltip: 'Edit Row',
onClick: (event, rowData) => {
// Code to display custom Dialog here
}
}
]}
/>
对于自定义添加操作，传递动作属性和 isFreeAction props：
<MaterialTable
// other props
actions={[
{
icon: 'add',
tooltip: 'Add Row',
// This makes add button to appear in table toolbar instead for each row
isFreeAction: true
onClick: (event, rowData) => {
// Code to display custom Dialog here
}
}
]}
/>
我的最终代码如下所示：
<MaterialTable
// other props
actions={[
{
icon: 'edit',
tooltip: 'Edit Row',
onClick: (event, rowData) => {
// Code to display custom Dialog here
}
},
{
icon: 'add',
tooltip: 'Add Row',
// This makes add button to appear in table toolbar instead for each row
isFreeAction: true
onClick: (event, rowData) => {
// Code to display custom Dialog here
}
},
]}
/>
其它你可能感兴趣的问题