FormData Возвращает пустые данные при отправке формы в реакции - PullRequest
Новая
       15

FormData Возвращает пустые данные при отправке формы в реакции

1 голос
/ 20 мая 2019

Я пытаюсь получить объект пары ключ-значение данных формы при отправке формы, используя конструктор new FormData().Но он всегда возвращает пустые данные.

Я уже пробовал event.persist(), чтобы избежать объединения пулов событий, но ничего не получалось 


export default class Test extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const target = event.target;
    const data = new FormData(target);
    console.log(data)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Enter username</label>
        <input id="username" name="username" type="text" />

        <button>Send data!</button>
      </form>
    );
  }
}

Я ожидаю объект, который содержит мои данные формы вследующий формат

{ "username": "Value" }

Ответы [ 2 ]

6 голосов
/ 20 мая 2019

Я думаю, вам нужно получить его через цикл.Попробуйте это 

  var formData = new FormData(target);

   for (var [key, value] of formData.entries()) { 
   console.log(key, value);
  }

Надеюсь, что это работает.

1 голос
/ 20 мая 2019

handleSubmit должен выглядеть следующим образом. 

handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);
    fetch('my-api', {
      method: 'POST',
      body: data,
    });
  }

После отправки формы на вкладке сети вы найдете данные формы с ключом-значением.

Если вы хотите получить доступ к одному значению, 

const username = data.get('username');
...