如何获取表单数据？

Question

我正在编写一个 React 应用程序，当尝试将登录表单数据发送到后端时，它是空的。// Login component classsubmitLoginForm = (event) => {    event.preventDefault();    const target = event.target;    const data = new FormData(target);    // data is empty, but I need it to contain the form data.    // ...}render() {    return (        <div>            <form onSubmit={this.submitLoginForm}>                <input type="hidden" name="csrfmiddlewaretoken" value={Cookies.get("csrftoken")} />                <label htmlFor="username">Username: </label>                <input id="username" name="username" type="text" />                <label htmlFor="password">Password: </label>                <input id="password" name="password" type="password" />                {this.state.errorText}                <input type="submit" value="submit" />            </form>        </div>    );}编辑：虽然 FormData 对象确实有表单数据，但将其传递给 fetch 请求无法传递任何数据，而只是发送一个空的 JSON 对象。JSON.stringify 也会出现同样的结果。如何将数据作为 JSON 对象获取？

Answer 1

TBH 我没有多少运气FormData能很好地处理反应。onSubmit您可以访问表单事件对象的表单字段。

// Login component class

submitLoginForm = (event) => {

  event.preventDefault();

  const target = event.target;

  const data = {

    username: target.username.value,

    password: target.password.value,

  };

  // JSON.stringify(data) in request body

}

Answer 2

不确定这是不是理想的方法，但你可以formData.entries()像这样建立一个 pojo，然后从那里做你需要做的任何事情。

const submitLoginForm = e => {

  e.preventDefault();

  const fd = new FormData(e.target);

  const formObj = [...fd.entries()].reduce((acc, [key, value]) => ({...acc, [key]: value}), {});

  console.log(formObj);

}

<form onsubmit="submitLoginForm(event)">

  <label htmlFor="username">Username: </label>

  <input id="username" name="username" type="text" />

  <label htmlFor="password">Password: </label>

  <input id="password" name="password" type="password" />

  <input type="submit" value="submit" />

</form>