如何将MUI自定义Dialog的输入数据传递至React父组件？

你的代码存在两处关键错误，导致无法正常传递输入数据，以下是具体修正方案：

1. 修正子组件（FormDialog）的输入框事件绑定 #

当前TextField的onChange写法错误，会在组件渲染时立即执行setValue，且无法获取输入框的实际内容。正确写法需通过事件对象获取输入值：

const FormDialog = ({ open, onClose, onSave }) => {
  const [value, setValue] = useState("");

  if (!open) return null;

  return (
    <div>
      <Dialog open={open} onClose={onClose}>
        <DialogTitle>Edit</DialogTitle>
        <DialogContent>
          <DialogContentText>Add name</DialogContentText>
          <TextField
            value={value}
            // 修正onChange：通过事件对象获取输入框内容
            onChange={(e) => setValue(e.target.value)} 
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={onClose}>Cancel</Button>
          <Button onClick={() => {
            onSave(value); // 向父组件传递输入值
            onClose();     // 关闭弹窗
          }}>Salva</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};

2. 修正父组件的回调函数传递与定义 #

当前父组件传递onSave时未接收子组件的参数，且editCategory函数的嵌套写法冗余，需调整为直接接收参数的普通函数：

// 直接接收子组件传来的value参数
const editCategory = (value) => {
  console.log("收到的输入值：", value);
  setOpen(false); // 关闭弹窗
};

// 调用Dialog时，传递onSave并接收子组件的value
<FormDialog 
  open={open} 
  onClose={() => setOpen(false)} 
  onSave={(value) => editCategory(value)} 
/>

执行流程说明 #

• 输入框内容变化时，子组件的setValue更新本地状态value
• 点击"Salva"按钮时，子组件调用父组件传入的onSave并传递当前输入值，同时触发onClose关闭弹窗
• 父组件的editCategory接收输入值，完成后续保存逻辑并关闭弹窗

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