Mam dość długi formularz do przesłania i chciałbym utworzyć obiekt zawierający nazwę wejścia jako klucz i wartość wejścia jako wartość. Próbowałem przeglądać event.target i event.target.elements, jak pokazano poniżej:

handleModify(event) {
    let tempPlayer = {}
    Object.entries(event.target.elements).forEach(([name, input]) => {
        tempPlayer[name] = input;
    });
}

Ale dostałem TypeError o zapętleniu cyklicznej wartości obiektu. Prawdopodobnie nie jest to właściwy sposób na zapętlenie tych wartości, o czym przekonałem się logując się do konsoli event.target i event.target.elements w rzeczywistości zawierają elementy formularza HTML. Nie wiem, jak inaczej uzyskać dane formularza. Mój formularz wygląda tak:

<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>

Używałem tej metody, ponieważ jest to sposób, w jaki zrobiłem to po stronie serwera, pobierając dane formularza i zapętlając wpisy req.body. Jednak teraz, gdy zmieniłem szablony ejs na React, nie mogę wysłać danych formularza. Dlatego próbuję przeglądać wartości bezpośrednio w metodzie uchwytu React. Nie udało mi się wysłać danych formularza z pobieraniem do mojego serwera node + express . req.body zawsze kończył się pusty. Myślę, że dzieje się tak dlatego, że używam analizatora treści i wysyłałem new FormData() (który nie jest obsługiwany?) Jako taki:

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))
    });
}

Jeśli jednak najpierw utworzę obiekt, a następnie wyślę go za pomocą funkcji pobierania, to działa. Więc czy ktoś wie, jak przechodzić przez elementy formularza lub jak rozwiązać problem pobierania? Dziękuję Ci :))

0
Maëlle 3 kwiecień 2020, 11:54

3 odpowiedzi

Najlepsza odpowiedź

Nie tak powinieneś to robić w ReactJS. Oto dobry samouczek dotyczący obsługi formularzy: https://reactjs.org/docs/forms.html

Zasadniczo musisz ustawić wartość dla każdego wejścia i obsługiwać ich odpowiednie wywołanie zwrotne onChange:

Na przykład

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

Następnie w swoim komponencie masz metodę onNameChange, która zapisuje nową wartość do stanu, na przykład:

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

Na koniec, przesyłając formularz, musisz użyć wartości wewnątrz this.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
  });
}

To tylko przykład, polecam najpierw przeczytać link, który ci dałem.

LE: Korzystanie z niekontrolowanego komponentu:

https://codesandbox.io/s/dark-framework-k2zkj tutaj masz przykład, który stworzyłem dla niekontrolowanego komponentu.

W zasadzie możesz to zrobić w swojej funkcji onSubmit:

  onSubmit(event) {
    event.preventDefault();
    const tempPlayer = new FormData(event.target);
    for (let [key, value] of tempPlayer.entries()) {
      console.log(key, value);
    }
  };
2
tudor.gergely 3 kwiecień 2020, 09:53

Czy jest jakiś powód, dla którego nie używasz kontrolowanych komponentów? Możesz zachować wartości wejściowe w stanie, a podczas przesyłania formularza wystarczy użyć wartości ze stanu.

Reaguj dokumenty w formularzach

0
torquan 3 kwiecień 2020, 09:07

Wydaje się, że błąd pochodzi z przechowywania samego input jako wartości. Być może gdzieś wykonałeś na nim operację. Zamiast tego możesz zapisać nazwę i wartość wejścia za pomocą:

tempPlayer[input.name] = input.value;

Próbny:

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: Wiadomo, że niekontrolowane formularze mają lepszą wydajność i mniejszą liczbę powtórzeń, jak pokazano w formularzu React hook. Nie musisz używać kontrolowanego komponentu.

Możesz nie potrzebować komponentów kontrolowanych - Blog swyx

0
Agney 3 kwiecień 2020, 09:58