React Material-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"
          }
        }}
      />

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

删除提示.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 属性有条件地在同一组件中渲染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>
  );
}