React使用Material UI搭建表单时dateAndTime字段无法同步提交如何解决

问题根因 #

1. dateAndTime字段被单独存储在独立的state中，没有和其他表单字段一起放到统一的data状态对象里
2. MUI的DateTimePicker的onChange回调返回的是直接的日期值，不是普通表单元素的事件对象，无法直接复用你原来处理普通输入的handle函数

修改步骤 #

1. 调整状态定义

删除独立的日期状态，将日期字段添加到统一的表单数据状态中：

// 删掉下面这行独立状态定义
// const [dateAndTime, setDateAndTime] = React.useState(null);
const [data, setData] = React.useState({
  campaignName: "",
  campaignDescription: "",
  campaignDateAndTime: null, // 新增日期字段，和DateTimePicker的name属性对应
  campaignDuration: "",
  characterSize: "",
  characterSelection: "",
  characterDamage: "",
});

2. 修改DateTimePicker绑定逻辑

将Picker的值绑定到data的对应字段，调整onChange逻辑直接更新data：

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DateTimePicker
    renderInput={(props) => <TextField {...props} />}
    label="Campaign Date & Time"
    value={data.campaignDateAndTime} // 绑定到data中的日期字段
    name="campaignDateAndTime"
    onChange={(newValue) => {
      // 直接更新data中的日期字段
      setData(prev => ({...prev, campaignDateAndTime: newValue}))
    }}
  />
</LocalizationProvider>

3. 提交时直接使用统一data对象

修改提交逻辑，直接用data对象即可，所有字段（包括日期）都会被包含：

const handleSubmit = (event) => {
  event.preventDefault();
  // 若后端要求日期为字符串格式，可在提交前做格式转换
  const submitData = {
    ...data,
    // 示例：转成ISO标准时间字符串
    campaignDateAndTime: data.campaignDateAndTime?.toISOString() || ''
  };
  // 此处写向后端发请求的逻辑即可
  console.log('待提交的完整数据：', submitData);
};

额外优化点 #

你当前的两个Select组件没有绑定value，选中选项后不会回显选中状态，需要补充value绑定：

{/* 角色尺寸Select */}
<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  name="characterSize"
  value={data.characterSize} // 补充这行
  label="Character Size"
  onChange={(e) => handle(e)}
>

{/* 角色选择Select */}
<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  name="characterSelection"
  value={data.characterSelection} // 补充这行
  label="Character Selection"
  onChange={(e) => handle(e)}
>

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