如何防止动作替代覆盖物料表中的可编辑onRowAdd按钮?

时间:2019-10-25 09:37:44

标签: javascript reactjs material-ui material-table

我希望能够向表中添加新数据,并且还具有一个操作按钮。我需要覆盖操作字段并使用按钮,因为我希望它打开材质UI菜单。但是,重写时,它还会替换Edittable onRowAdd功能随附的添加按钮。您可以通过将以下代码粘贴到“操作重叠示例”代码窗口中来复制问题: https://material-table.com/#/docs/features/component-overriding

您可以在“可编辑示例”中看到添加按钮: https://material-table.com/#/docs/features/editable

class ActionOverriding extends React.Component {
  render() {
    return (
      <MaterialTable
          editable={{
        onRowAdd: newData =>
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    {}
                    resolve();
                }, 1000);}),}}
        title="Action Overriding Preview"
        options={{
            export:true,
        }}
        columns={[
          { title: 'Name', field: 'name' },
        ]}
        data={[{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },]}
        actions={[{
            icon: 'save',
            tooltip: 'Save User',
            onClick: (event, rowData) => alert("You saved " + rowData.name)
          }]} 
        components={{
          Action: props => (
            <Button onClick={(event) => props.action.onClick(event, props.data)} color="primary" variant="contained" style={{textTransform: 'none'}} size="small">My Button</Button>
),}}/>)}}

0 个答案:

没有答案