React Material-Table 通过 table 动作调用 React 组件

Question

我有一个数据表实现如下。

<MaterialTable
        icons={tableIcons}
        title={title}
        columns={columns}
        data={data}        
        actions={[
          {
            icon: () => <Edit />,
            tooltip: 'Edit',
            onClick: (event, rowData) => {

            }
          },
          {
            icon: () => <Delete />,
            tooltip: 'Delete',
            onClick: (event, rowData) => {
              return <DeletePrompt button_click="1" /> // <-- this is where I need to call the modal
            }
          }
        ]}
        options={{
          actionsColumnIndex: -1,
          exportButton: true,
          headerStyle: {
            fontWeight: "bold"
          }
        }}
      />

但是，我需要使用以下模式来执行删除操作。

DeletePrompt.jsx

export default function DeletePrompt(props) {
  const content = props.content;
  const data_id = props.data_id;

  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  if(props.button_click === 1){
    handleClickOpen()
  }

  return (
    <div>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">
          {"Are you sure to Delete?"}
        </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            { content }
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={handleClose} autoFocus>
            Delete
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

我知道调用 handleClickOpen() 方法在这种情况下会起作用。但由于某种原因，它似乎不起作用。猜猜我在这里遗漏了什么。

Answer 1

您应该设置一个对话框布尔值和一个状态变量来保存所选行数据的数据，而不是在 Delete 图标的 onClick 方法中单击按钮时呈现模态.

const [open, setOpen] = React.useState(false);
const [selectedItem, setSelectedItem] = React.useState({});

在您的 onClick 中，您可以将代码更新为以下以触发模式的布尔标志，并将行数据存储在 selectedItem 状态以用于删除模式。

...
{
  icon: () => <Delete />,
  tooltip: 'Delete',
  onClick: (event, rowData) => {
    setSelectedItem(rowData)
    setOpen(true)
  }
}
...

你可以使用 open prop

在同一组件中有条件地渲染 deletePrompt

{open ? 
  <DeletePrompt
    open={open}
    handleClose(() => { // reset on close
      setOpen(false)
      setSelectedItem({})
    })
    content={selectedItem}
  .... // other props
  /> : null}

最后，更新您的 DeletePrompt 组件以从那里删除 open state 并使用道具。

export default function DeletePrompt(props) {
  const { content, open, handleClose } = props; // assignment
  const data_id = props.data_id;

//   const [open, setOpen] = React.useState(false);

//   const handleClickOpen = () => {
//     setOpen(true);
//   };

//   const handleClose = () => {
//     setOpen(false);
//   };

//   if(props.button_click === 1){
//     handleClickOpen()
//   }

  return (
    <div>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">
          {"Are you sure to Delete?"}
        </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            { content } // make sure, this is not an object. If its an object use some property of it.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={handleClose} autoFocus>
            Delete
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

React Material-Table 通过 table 动作调用 React 组件

React Material-Table calling a React Component via table actions

javascript

reactjs

material-ui

material-table