React+SpringBoot项目中发送POST请求前如何修改表单输入数据

解决方案 #

你当前的代码已经满足「前端展示保留自定义dateFormat」的需求，react-datepicker的dateFormat属性只会控制页面展示格式，实际绑定到表单的值还是原生Date对象，只需要在提交POST请求前修改data对象里的日期字段即可。

最简修改方案

直接修改onSubmit函数里提交的data即可：

import "./styles.css";
import DatePicker from 'react-datepicker';
import {useForm, Controller}  from "react-hook-form";
import "react-datepicker/dist/react-datepicker.css";

export default function App() {
  const {register, formState: { errors }, handleSubmit, control} = useForm();
  const onSubmit = (data) => {
    // 转换日期为ISO字符串，完全不影响前端展示逻辑
    const submitData = {
      ...data,
      time: data.time instanceof Date ? data.time.toISOString() : data.time
    }
    fetch('/test', 
        {   method: 'POST',           
            headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
            },
            body: JSON.stringify(submitData),
        }
        );
  };

  return (
  <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
          name="time"
          control={control}
          render={({ field: { onChange, value} }) => (
              <DatePicker
                  onChange = {onChange}
                  selected= {value}
                  showTimeSelect
                  dateFormat="MMM d, yyyy h:mm aa"
              />
          )}
          rules={{ required:true}}
      />  
  <input type="submit"/>
  </form>
    );
}

多日期字段通用方案

如果表单里有多个需要转换的日期字段，可以写个通用转换函数批量处理，避免重复代码：

// 可以放在组件外或者公共工具文件里
const formatDatesToISO = (data, dateFields = []) => {
  const formatted = {...data}
  dateFields.forEach(field => {
    if (formatted[field] instanceof Date) {
      formatted[field] = formatted[field].toISOString()
    }
  })
  return formatted
}

// onSubmit里直接调用即可
const onSubmit = (data) => {
  // 把所有要转换的日期字段名放到第二个数组参数里
  const submitData = formatDatesToISO(data, ['time', 'startTime', 'endTime'])
  // 后续提交逻辑和原来一致
}

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