使用 React (TypeScript) 时如何访问 post 请求中的表单数据？

Question

我想在 TypeScript 中使用 React 创建一个简单的注册页面。我的目标是在注册页面上创建两个输入字段，要求输入名字和姓氏，一旦提交表单，它会将用户重定向到一个名为“完整”的页面，该页面将显示他们的名字和姓氏。 我能够使用

get

方法来完成此操作，因为我能够使用如下所示的 url 参数。

注册页面：

import React, { useState, useRef } from 'react';

export default function SignUpPage() {
  return (
    <>
      <form autoComplete="off" action="/complete" method="get">
        <label htmlFor="firstNameInputField">First Name: </label>
        <input type="text" id="firstNameInputField" name="firstName"/><br />
        <label htmlFor="lastNameInputField">Last Name: </label>
        <input type="text" id="lastNameInputField" name="lastName"/><br />
      
        <input type="submit" value="Submit"/>
      </form>
    </>
  );
}

完整页面：

import { useSearchParams } from 'next/navigation';

export default function SignUpComplete()
{
    const searchParams = useSearchParams();
    const firstName = searchParams.get("firstName");
    const lastName = searchParams.get("lastName");

    return (
    <>
        <p>Thank you for submitting! Your credentials are:</p>
        <p>First name: {firstName}</p>
        <p>Last name: {lastName}</p>
        <br/>
        <a href="http://localhost:3000/login">Click here to login!</a>
    </>
    )
}

但是，我不想使用

get

方法，而是想使用

post

方法，因为我听说它更能保护用户的信息。因此，我如何使用

post

方法来格式化我的注册页面，如下所示：

import React, { useState, useRef } from 'react';

export default function SignUpPage() {
  const firstNameRef = useRef(null) as unknown as React.MutableRefObject<HTMLInputElement>;
  const lastNameRef = useRef(null) as unknown as React.MutableRefObject<HTMLInputElement>;

  function submitCredentials()
  {
    // method to send credentials goes here
  }

  return (
    <>
      <form autoComplete="off" action="/complete" method="post" onSubmit={submitCredentials}>
        <label htmlFor="firstNameInputField">First Name: </label>
        <input type="text" id="firstNameInputField" ref={firstNameRef}/><br />
        <label htmlFor="lastNameInputField">Last Name: </label>
        <input type="text" id="lastNameInputField" ref={lastNameRef}/><br />
      
        <input type="submit" value="Submit"/>
      </form>
    </>
  );
}

或者我如何使用 post 方法来格式化我的完整页面，如下所示：

import React, { useState, useRef } from 'react';

export default function SignUpComplete()
{
    let firstName = "";
    let lastName = "";
    
    // method to assign firstName and lastName goes here
    
    return (
    <>
        <p>Thank you for submitting! Your credentials are:</p>
        <p>First name: {firstName}</p>
        <p>Last name: {lastName}</p>
        <br/>
        <a href="http://localhost:3000/login">Click here to login!</a>
    </>
    )
}

Answer 1

您可以使用

FormData

从表单中检索字段，然后使用 fetch 将其发送到服务器。您不需要为每个字段使用

useRef

:)

根据您的代码，您可以这样做：

import React from 'react';

export default function SignUpPage() {
  function submitCredentials(e) {
    // prevent default form action from submitting data
    e.preventDefault();

    // convert fields from form to FormData object
    const formData = new FormData(e.target)

    // convert FormData to simple object, which can be serialized to JSON
    let data = {}
    formData.forEach((value, key) => data[key] = value);

    // change /api/endpoint to your API
    fetch("/api/endpoint", {
      method: "post",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data)
    })
      .then(() => console.log("OK!") /* TODO: add logic for handling success registration */)
      .catch((error) => console.error(error) /* TODO: add logic for handling errors */)
  }

  return (
    <>
      <form autoComplete="off" method="post" onSubmit={submitCredentials}>
        <label htmlFor="firstNameInputField">First Name: </label>
        <input type="text" name="firstName" id="firstNameInputField" />
        <br />
        <label htmlFor="lastNameInputField">Last Name: </label>
        <input type="text" name="lastName" id="lastNameInputField" />
        <br />

        <input type="submit" value="Submit"/>
      </form>
    </>
  );
}