ReactJS中如何获取表单数据并转为对象以发起POST请求

方案1：使用受控组件（推荐，更灵活控制表单逻辑） #

适合需要实时校验、联动修改表单内容的场景：

1. 父组件（App）定义表单状态和更新函数，将更新函数传递给Question子组件

import { useState } from 'react'

function App() {
  // 存储所有表单数据的对象
  const [formData, setFormData] = useState({})

  // 字段更新逻辑，传给子组件调用
  const updateField = (questionId, value) => {
    setFormData(prev => ({
      ...prev,
      [questionId]: value
    }))
  }

  // 表单提交逻辑
  const handleSubmit = async (e) => {
    e.preventDefault()
    // formData就是封装完成的对象，直接发起POST请求即可
    await fetch('你的后端接口地址', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    })
  }

  return (
    <div className="App">
        <FormTitle/>
        {/* 绑定提交事件 */}
        <form onSubmit={handleSubmit}>
        {  
         error? <h1>资源未找到</h1>:data.map((item) =>(
            // 将更新函数传给子组件
            <Qustion 
              qustion={item.question} 
              type={item.type} 
              requre={item.requre} 
              id={item.id} 
              answer={item.answares} 
              key={item.id}
              updateField={updateField}
            />
         ))
        }
        <div className="submit-right">
          <input className="submit-button" type="submit" value="Submit" />
        </div>
        </form>
    </div>
  )
}

2. 修改Question子组件，触发更新时调用父组件传入的函数

function Qustion(props) {
  const updateField = (e) => {
    // 把当前问题ID和输入值传给父组件
    props.updateField(props.id, e.target.value)
  }

  if (props.type == "text") {
    return (
        <div className="box">
            <h3 className="">{props.qustion}</h3>
            <input className="short-text" placeholder="Your answer" id={"text"+props.id} name={"q"+props.id} type="text" onChange={updateField}/>
        </div>
    )
  } else if (props.type == "choice") {
    return (
        <div className="box">
            <h3 className="">{props.qustion}{props.requre? <label className="requir">*</label>:""}</h3>
            {props.answer.map(ans=>(
            <div key={ans}>
                <input className="radio" type="radio" id={ans} name={"radio"+props.id} value={ans} required={props.requre} onChange={updateField}/>
                <label htmlFor={ans}>{ans}</label>
            </div>
            ))}
        </div>
    )
  }
}

方案2：使用FormData直接获取（适合简单场景，无需维护状态） #

如果不需要实时控制表单内容，可直接在提交时通过原生API获取所有表单数据，不用修改Question子组件：

function App() {
  const handleSubmit = async (e) => {
    e.preventDefault()
    // 直接从表单DOM获取所有数据
    const formData = new FormData(e.target)
    // 将FormData转为普通JS对象
    const submitObj = Object.fromEntries(formData.entries())
    // 直接发起POST请求
    await fetch('你的后端接口地址', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(submitObj)
    })
  }

  return (
    <div className="App">
        <FormTitle/>
        <form onSubmit={handleSubmit}>
        {  
         error? <h1>资源未找到</h1>:data.map((item) =>(
            <Qustion qustion={item.question} type={item.type} requre={item.requre} id={item.id} answer={item.answares} key={item.id} />
         ))
        }
        <div className="submit-right">
          <input className="submit-button" type="submit" value="Submit" />
        </div>
        </form>
    </div>
  )
}

注意：该方案下提交对象的key为输入框的name属性值，你可以根据需求调整输入框的name命名规则。

额外注意事项 #

你的代码存在多处拼写错误，建议修正避免后续出现异常：qustion应为question、requre应为required、answares应为answers、sorce应为source。

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