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

Question

我正在使用 reactjs 前端和 springboot 后端，我想知道如何在向后端发出 POST 请求之前 format/change 形成输入数据。我想在显示时保留日期格式，但我想在发出 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>
    );
}

Answer 1

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

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

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

Changing form input data before POST request

reactjs

react-hook-form