Javascript 如何从material UI元素提取数据，并添加onSubmit函数将数据发送到后端

我对react/material UI相当陌生

我一直在关注youtube视频和其他项目资源

为了简单起见，我决定使用

材质UI

但我现在被困在如何从材质UI的输入中提取数据的问题上

我有一个

警报对话框

，在我的代码中使用

MaterialUI

作为

datetime

输入

我需要分别提取日期和时间，并将数据发送到后端

其代码（更新）如下：

export default function AlertDialog() {
    const [open, setOpen] = React.useState(false);

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

    const handleClose = () => {
        setOpen(false);
    };
    
    return (
        <div>
            <Button
                variant="contained"
                color="default"
                onClick={handleClickOpen}
            >
                Schedule a session
            </Button>
            <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="dialog-title"
                aria-describedby="dialog-description"
            >
                <DialogTitle id="dialog-title">
                    {"Schedule your session"}
                </DialogTitle>
                <DialogContent>
                    <DialogContentText id="dialog-description">
                        Choose a date and time according to your convenience!
                    </DialogContentText>
                </DialogContent>
                <form className={classes.container} noValidate>
                    <TextField
                        id="datetime-local"
                        label="Enter Date and Time"
                        type="datetime-local"
                        defaultValue="2020-12-12T10:30"
                        className={classes.textField}
                        InputLabelProps={{
                            shrink: true,
                        }}
                    />
                </form>
                <DialogActions>
                    <Button onClick={handleClose}
                        color="primary"
                        onSubmit={onSubmit}>
                        Submit
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

导出默认函数AlertDialog（）{
const[open，setOpen]=React.useState（false）；
常量handleClickOpen=（）=>{
setOpen（真）；
};
常量handleClose=（）=>{
setOpen（假）；
};
返回(
安排会议
{“安排您的会话”}
根据您的方便选择日期和时间！
提交
);
}

另外，在功能组件中使用它更容易还是应该将其转换为类组件

---

如果一个类组件更容易实现这一点，请给我一个小的headstart，我将继续代码。

使用

npm install mui rff

，来处理表单数据

演示链接-

NPM包链接-

const[dateTimeLocal，setDateTimeLocal]=useState（）；
const onInputChange=（事件）=>{
setDateTimeLocal（event.target.value）；
};
返回(
);

---

请通过-

尝试在React中使用数据绑定概念从字段中提取数据。在处理无状态对象时，有一种说法认为功能组件的性能更好，而在处理有状态对象时，可以使用类组件。有关更多详细信息，您可以在谷歌上搜索类组件和函数组件。非常感谢！这非常有用。它将datetime设置为本地计算机datetime。我的项目要求我提取用户在网页上输入的日期时间

const [dateTimeLocal, setDateTimeLocal] = useState();
  const onInputChange = (event) => {
    setDateTimeLocal(event.target.value);
  };

  return (
    
      <TextField
        id="datetime-local"
        label="Next appointment"
        type="datetime-local"
        defaultValue="2017-05-24T10:30"
        onChange={onInputChange}
        value={dateTimeLocal}
        InputLabelProps={{
          shrink: true
        }}
      />
  );