如何向MUI DateTimePicker传递props对接时间选择逻辑

你的核心问题是现有DateTimePicker代码没有对接父组件传入的状态与回调，同时缺少原有TextField的配置项，按以下步骤调整即可实现和原生datetime-local输入框一致的逻辑：

核心调整点 #

• 值绑定：移除组件内部独立的useState状态，直接使用父组件传入的startTime作为选中值，空值时回退到你原来设置的默认时间2022-06-24T10:30，注意DateTimePicker接收Date类型值，字符串格式的时间需要先做转换。
• 事件监听：选中时间变化时，对齐原有handlechange的入参格式回传值，保证父组件逻辑不需要修改即可适配。
• 格式配置：通过inputFormat属性自定义日期时间的显示格式，可按需调整为你需要的展示样式。
• 属性透传：把原有TextField上的fullWidth、required、color、size等配置，写到renderInput渲染的TextField组件上即可。
• 优化建议：LocalizationProvider不需要放在表单子组件内部，建议提升到项目根组件或者表单外层组件，全局只注册一次即可，避免重复渲染。

完整可运行代码 #

import React from 'react';
import { TextField } from '@mui/material';
import { DateTimePicker, LocalizationProvider } from '@mui/lab';
import AdapterDateFns from '@mui/lab/AdapterDateFns';

const Step2 = ({handlechange, value: {startTime}}) => {
  // 初始化值：父组件无传值时使用默认时间
  const selectedValue = startTime ? new Date(startTime) : new Date('2022-06-24T10:30');

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateTimePicker
        label="Start Time"
        name="startTime"
        value={selectedValue}
        // 自定义显示格式，可按需修改，例如"yyyy-MM-dd'T'HH:mm"和原生datetime-local格式对齐
        inputFormat="yyyy-MM-dd HH:mm"
        mask="____-__-__ __:__"
        onChange={(newValue) => {
          // 适配原有handlechange的事件对象入参，父组件无需修改逻辑
          handlechange({
            target: {
              name: 'startTime',
              value: newValue?.toISOString() || ''
            }
          });
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            fullWidth
            required
            color="success"
            size="small"
            margin="normal"
            InputLabelProps={{
              shrink: true,
              ...params.InputLabelProps
            }}
          />
        )}
      />
    </LocalizationProvider>
  )
}

export default Step2

补充说明 #

• 如果你的父组件handlechange不需要事件对象格式，可以直接在onChange里调用handlechange(newValue)，根据自己的父组件逻辑调整即可。
• 如果你使用MUI v6+版本，DateTimePicker已从@mui/lab迁移到@mui/x-date-pickers包，修改对应导包路径即可，组件props逻辑基本一致。
• 如果需要自定义提交时的时间格式，可以在onChange回调里自行格式化newValue后再回传给父组件。

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