时间戳

首页 > 解决方案 > React Material-Table 通过表操作调用 React 组件

javascript - React Material-Table 通过表操作调用 React 组件

问题描述

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

<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()在这种情况下调用该方法会起作用。但由于某种原因，它似乎不起作用。任何猜测我在这里错过了什么。

标签： javascriptreactjsmaterial-uimaterial-table

解决方案

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

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

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

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

deletePrompt比您可以使用open道具有条件地在同一个组件中呈现

{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>
  );
}

推荐阅读