Material UI Dialog点击Ok按钮时如何传递Id、email到submitData

使用Material UI的Dialog组件时，点击Ok按钮触发提交逻辑的过程中，获取到的Id和email参数值为undefined。
预期效果：将Id与email两个参数传入submitData提交函数。目前在openDialog方法中可以正常获取到这两个数据，但无法将其传递到submitData方法中。

• 调用openDialog时传入的id、email未做持久化存储，弹窗打开后两个参数脱离了原有作用域，无法被提交逻辑访问
• Dialog内Ok按钮直接绑定onClick={submitData}，点击事件默认传入的是事件对象，不会自动携带业务参数id和email，因此函数内拿到的参数值为undefined

在自定义useDialog Hook中新增状态，存储当前触发弹窗的行数据对应的id和email：调用openDialog打开弹窗时，将传入的参数存入状态；触发提交逻辑时直接从状态中读取对应参数即可，不需要在按钮点击事件中额外传参。

import { useState, useEffect } from "react";
import "./styles.css";
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle
} from "@material-ui/core";

const data = [
  {
    id: 1,
    name: "Test1",
    email: "test1@test.com"
  },
  {
    id: 2,
    name: "Test2",
    email: "test2@test.com"
  }
];

const MyDialog = ({ open, handleClose, submitData, title, children }) => {
  return (
    <Dialog open={open} onClose={handleClose}>
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>{children}</DialogContent>
      <DialogActions>
        <Button onClick={submitData} color="primary">
          Ok
        </Button>
        <Button onClick={handleClose} color="primary">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
};

const useDialog = () => {
  const [open, setOpen] = useState(false);
  // 新增状态存储当前操作的id和email
  const [currentData, setCurrentData] = useState({ id: null, email: '' });
  const openDialog = (id, email) => {
    // 打开弹窗时存储当前行的参数
    setCurrentData({ id, email });
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  const submitData = () => {
    // 直接从状态里取存储的id和email
    const { id, email } = currentData;
    // 此处编写提交数据的post逻辑
    console.log(id, email);
    setOpen(false);
  };
  const props = {
    open,
    handleClose,
    submitData
  };
  return [openDialog, props];
};
export default function App() {
  const [openDialog, dialogProps] = useDialog();
  const [players, setPlayers] = useState([]);
  useEffect(() => {
    setPlayers(data);
  }, []);
  return (
    <div className="App">
      <div className="players">
        {players.map(({ id, name, email }) => (
          <div key={id} className="row">
            <div>
              <div className="name" onClick={(e) => openDialog(id, email)}>
                {name}
              </div>
            </div>
            <div>
              <div className="email">{email}</div>
            </div>
          </div>
        ))}
      </div>
      <MyDialog {...dialogProps} title="Confirm Player"></MyDialog>
    </div>
  );
}

可选优化：如果需要避免数据残留，可以在handleClose方法中添加setCurrentData({ id: null, email: '' })，关闭弹窗时清空暂存的参数。

内容的提问来源于stack exchange，提问作者soccerway