使用Material UI注册表单模板时无法通过FormData获取DatePicker值

问题根因 #

你在父组件传递给MyDataPicker的name属性没有透传到内部最终渲染的input元素上，而FormData是依赖表单元素的name属性收集提交值的，缺少name属性的表单字段自然无法被读取。

修复方案 #

只需要修改MyDataPicker.js，把外层传入的name属性透传给内部的TextField组件即可，修改后的完整代码如下：

import * as React from 'react';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DateTimePicker from '@mui/lab/DateTimePicker';


export default function MaterialUIPickers(props) {
    const [value, setValue] = React.useState(props.date);

    const handleChange = (newValue) => {
        setValue(newValue);
    };

    return (
        <LocalizationProvider dateAdapter={AdapterDateFns}>
            <Stack spacing={3}>
                <DateTimePicker
                    label={props.label}
                    value={value}
                    onChange={handleChange}
                    renderInput={(params) => <TextField 
                        {...params}
                        // 透传外层传入的name属性
                        name={props.name}
                        // 可选：和其他表单项保持满宽样式
                        fullWidth
                        required
                    />}
                    clearable
                    cleartext="清空"
                />
            </Stack>
        </LocalizationProvider>
    );
}

修改完成后重新提交表单，就能在FormData中正常读取到start和end两个日期字段的值了。

可选优化 #

如果你需要自定义提交的日期格式（比如ISO标准时间、时间戳等），可以在给TextField赋值时提前格式化，示例如下：

renderInput={(params) => <TextField 
    {...params}
    name={props.name}
    fullWidth
    required
    // 提交ISO标准格式的日期字符串，方便后端处理
    value={value ? value.toISOString() : ''}
/>}

内容的提问来源于stack exchange，提问作者Karolína Vyskočilová