如何在reactjs中将表单数据作为对象获取

Question

我正在尝试使用 React 创建一个 google 表单，我一直在将所有问题创建为组件

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

而且我一直在app文件上创建一个表单，把组件放在他里面，

  return (
<div className="App">
    <FormTitle/>
    <form>
    {  
     error? <h1>the sorce not found</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>

);

如何获取所有表单数据作为一个对象来创建一个post请求??

Answer 1

在表单所在的文件开头尝试此功能

  const formSubmit = (event) => {
    event.preventDefault();
    var data = new FormData(event.target);
    let formObject = Object.fromEntries(data.entries());
    console.log(formObject);
  }

并在表格中使用此 onSubmit={formSubmit}

    <form onSubmit={formSubmit}>
       <any element or components>
    </form>

如何在reactjs中将表单数据作为对象获取

How to get form data as a object in reactjs

node.js

reactjs

react-fullstack