如何获取表单数据？

Question

我正在编写一个 React 应用程序，当尝试获取登录表单数据以发送到后端时，它是空的。

// Login component class
submitLoginForm = (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

不确定这是否是理想的方法，但您可以像这样从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>

Answer 2

TBH 我没有太多运气让FormData 与 React 配合得很好。您可以访问表单的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
}