Перебор массива элементов формы в React

У меня есть функциональный компонент React с формой, onSubmit я хочу перебрать все элементы формы....

export default function TransactionFilter() {

return (
   <form onSubmit={handleSubmit}>
      <TextField id="username" /><br/>
      <TextField id="password" /><br/>
   </form>
)

const handleSubmit = (event) => {
        event.preventDefault();
        var formElements = event.target.elements

        formElements.forEach(element => 
          console.log(`I found this ${element}`)
        );

Но этот код дает мне ошибку...

react-dom.development.js:476 Uncaught TypeError: formElements.forEach is not a function
    at handleSubmit (FilterForm.js:49)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)

Разве я не использую forEach в правильный путь? Если нет, то как правильно перебирать массив элементов формы в React?


reactjs javascript forms react-functional-component iteration
person AbuMariam    schedule 25.02.2020    source источник
comment
Обычно, используя реакцию, вы избегаете необходимости перебирать фактические элементы. Вы должны привязываться к изменению каждого элемента на какой-то объект состояния. Это должно быть редким случаем, когда вам нужен доступ к чему-то другому, кроме значений.   -  person Deadron    schedule 25.02.2020

Ответы (3)


arrow_upward
2
arrow_downward

Объект elements на самом деле является объектом HTMLFormControlsCollection.

Вы можете использовать метод Array.prototype.forEach для повторения коллекции следующим образом:

Array.prototype.forEach.call(event.target.elements, (element) => {
  console.log(element);
})
person Jackson    schedule 25.02.2020

arrow_upward
0
arrow_downward

event.target.elements вернет значение undefined

Я предлагаю сделать это реагирующим образом, иметь массив всех элементов формы в состоянии.

 export default function TransactionFilter() {
  const [formData, setFormData] = React.useState([
    { id: 'username', value:'' },
    { id: 'password', value:'' }
  ]);
  const handleSubmit = (event) => {
    event.preventDefault();
    formData.forEach(element => 
      console.log(`I found this ${element.value}`)
    );
  };
  return (
       <form onSubmit={handleSubmit}>
          {formData.map((element, index) => {
            return ( <React.Fragment>
                     <TextField id={element.id} value={element.value} 
                     onChange={e => {
                       setFormData(
                         [
                           ...formData.slice(0, index), 
                           { ...formData[index], value: e.target.value },
                           ...formData.slice(index + 1)
                         ]
                       );
                     }}

                     />
                     <br/>
                   </React.Fragment>
            );
          })}
       </form>
  );
}
person Subin Sebastian    schedule 25.02.2020

arrow_upward
0
arrow_downward

Вы также можете использовать of синтаксис:

const handleSubmit = event => {
    event.preventDefault()

    for (const element of event.target.elements) {
        console.log(`I found this ${element}`)
    }
}
person Lord Elrond    schedule 07.12.2020