在 POST 请求之前更改表单输入数据答案

【问题标题】：Changing form input data before POST request在 POST 请求之前更改表单输入数据
【发布时间】：2021-12-03 00:10:23
【问题描述】：

我正在使用 reactjs 前端和 springboot 后端，我想知道如何在向后端发出 POST 请求之前格式化/更改表单输入数据。我想在显示时保持 dateFormat，但我想在发出 POST 请求之前将日期的值更改为 ISO 字符串。新的反应，所以任何讨论/帮助表示赞赏。

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) => {
    console.log(data.time.toISOString());
    fetch('/test', 
        {   method: 'POST',           
            headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
            },
            body: JSON.stringify(data),
        }
        );
  };

  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>
    );
}

【问题讨论】：

嘿，这里有一个小提示。不要对 API 调用使用 Fetch Method 而是使用 Axios。 Axios 支持跨浏览器，Fetch 在 Opera 或 Explorer 等浏览器中有时会失败。
好的，记住这一点

标签： reactjs react-hook-form

【解决方案1】：

你离得太近了！不要只记录转换后的数据，而是将其作为您的发布请求的一部分提交：

const onSubmit = (data) => {
    const transformedTime = data.time.toISOString();
    // make a copy of data, but overwrite the time property with our transformed time
    const dataToSubmit = { ...data, time: transformedTime };
    // submit the new dataToSubmit object as a part of the request
    fetch('/test', 
        {   method: 'POST',           
            headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
            },
            body: JSON.stringify(dataToSubmit),
        }
        );
  };

【讨论】：

谢谢！这正是我所需要的。