У меня достаточно длинная форма для отправки, и я хотел бы создать объект , содержащий имя ввода в качестве ключа и значение ввода в качестве значения. Я попытался выполнить цикл по event.target
и event.target.elements
, как показано ниже:
handleModify(event) {
let tempPlayer = {}
Object.entries(event.target.elements).forEach(([name, input]) => {
tempPlayer[name] = input;
});
}
Но я получил ошибку TypeError о циклическом циклическом c значении объекта. Вероятно, это неправильный способ l oop этих значений, как я увидел, войдя в консоль событий event.target и event.target.elements фактически содержат html элементов формы. Я не знаю, как еще получить данные формы. Моя форма выглядит так:
<form onSubmit={e=> props.onSubmit(e)}>
<label htmlFor="name">
Name:
<input type="text" name="name" placeholder="Estelle Nze Minko" />
</label>
<label htmlFor="poste">
Poste:
<input type="text" name="poste" placeholder="Back" />
</label>
<label htmlFor="number">
Number:
<input type="number" min="0" max="100" step="1" name="number" placeholder="27" />
</label>
<label htmlFor="height">
Height (m):
<input type="number" min="1.00" max="2.34" step="0.01" name="height" placeholder="1.78" />
</label>
<label htmlFor="selects">
Number of selects:
<input type="number" min="0" max="300" step="1" name="selects" placeholder="88" />
</label>
<button type="submit">Add</button>
</form>
Я использовал этот метод, потому что это был способ, которым я делал это на стороне сервера, получая данные формы и зацикливая записи req.body
. Однако теперь, когда я изменил шаблоны e js на React, я не могу отправить данные формы. Вот почему я пытаюсь l oop через значения непосредственно в методе React handle. Мне не удалось отправить данные формы с помощью fetch на мой узел + express сервер. req.body
всегда заканчивалось тем, что было пустым. Я думаю, это потому, что я использую body-parser , и я отправлял new FormData()
(что не поддерживается?) Следующим образом:
handleModify(event) {
event.preventDefault();
fetch(`/players/modify/${this.props.match.params.id}/confirm`, {
method: "POST",
headers: { "Content-Type": "application/json" },
mode: "cors",
body: JSON.stringify(new FormData(event.target))
});
}
Однако, если я создаю сначала объект, а затем отправить его с помощью fetch, он работает. Итак, кто-нибудь знает, как l oop через элементы формы или как решить проблему выборки? Спасибо :))