Как я могу получить данные формы?

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 действительно имеет данные формы, Передача его в запрос на выборку не приводит к передаче каких-либо данных и просто отправляет пустой объект 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

Не уверен, что это идеальный способ сделать это, но вы можете создать pojo из formData.entries(), как это, и затем делать все, что вам нужно оттуда.

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>