Форма ответа: l oop через event.target для создания объекта

Question

У меня достаточно длинная форма для отправки, и я хотел бы создать объект , содержащий имя ввода в качестве ключа и значение ввода в качестве значения. Я попытался выполнить цикл по 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 через элементы формы или как решить проблему выборки? Спасибо :))

Answer 1

Есть ли причина, по которой вы не используете контролируемые компоненты? Вы можете сохранить входные значения в состоянии, а при отправке формы просто использовать значения из состояния.

Реагировать на документы на формах

Answer 2

Похоже, ошибка связана с сохранением самого значения input, возможно, вы где-то выполнили операцию над ним. Вместо этого вы можете сохранить имя и значение ввода с помощью:

tempPlayer[input.name] = input.value;

Демо:

const root = document.getElementById("root");

const { render } = ReactDOM;

function App() {
  const handleSubmit = (event) => {
    event.preventDefault();
    let tempPlayer = {}
    Object.entries(event.target.elements).forEach(([name, input]) => {
        if(input.type != 'submit') {
          tempPlayer[input.name] = input.value;
        }
    });
    console.log(tempPlayer)
  }
  return (
    <form onSubmit={handleSubmit}>
      <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>
  );
}

render(<App />, root);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root" />

PS: Неконтролируемые формы, как известно, имеют улучшения производительности и уменьшенные повторные отображения, как показано в Форма React hook . У вас нет для использования управляемого компонента.

Возможно, вам не нужны контролируемые компоненты - swyx Blog

Answer 3

Это не так, как вы должны сделать это в ReactJS. Вот хороший учебник по обработке форм: https://reactjs.org/docs/forms.html

По сути, вам нужно установить значение для каждого входа и обработать их соответствующий обратный вызов onChange:

например,

    <input type="text" name="name" value={this.state.name} onChange={onNameChange} placeholder="Estelle Nze Minko" />

Затем в вашем компоненте есть метод onNameChange, который сохраняет новое значение в состояние, например:

onNameChange(event) {
  const name = event.target.value;
  this.setState(s => {...s, name});
}

Наконец, при отправке формы вам нужно использовать значения внутри этого .state

handleSubmit(e) {
  e.preventDefault(); // prevent page reload
  const {name} = this.state;
  const data = JSON.stringify({name});
  fetch(`/players/modify/${this.props.match.params.id}/confirm`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    mode: "cors",
    body: data
  });
}

Это всего лишь пример, я рекомендую вам прочитать ссылку, которую я дал вам вначале.

LE: Использование неконтролируемого компонента:

https://codesandbox.io/s/dark-framework-k2zkj здесь у вас есть пример, который я создал для неуправляемого компонента.

в основном вы можете сделать это в своей функции onSubmit:

  onSubmit(event) {
    event.preventDefault();
    const tempPlayer = new FormData(event.target);
    for (let [key, value] of tempPlayer.entries()) {
      console.log(key, value);
    }
  };