Чтобы получить значение ввода формы при отправке:

  1. Создайте переменную состояния для хранения значения ввода.
  2. Установите обработчик событий onChange для ввода, чтобы обновлять переменную состояния при изменении значения ввода.
  3. Установите обработчик события onSubmit для элемента form.
  4. Получите доступ к значению поля ввода в обработчике событий onSubmit.

Например:

App.js

import { useState } from 'react';
export default function App() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [message, setMessage] = useState('');
  const handleSubmit = (event) => {
    event.preventDefault();
    setMessage(`Hello ${firstName} ${lastName}!`);
    setFirstName('');
    setLastName('');
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        id="firstName"
        name="firstName"
        value={firstName}
        placeholder="First Name"
        onChange={(event) =>
          setFirstName(event.target.value)
        }
      />
      <br />
      <br />
      <input
        type="text"
        id="lastName"
        name="lastName"
        value={lastName}
        placeholder="Last Name"
        onChange={(event) => {
          setLastName(event.target.value);
        }}
      />
      <br />
      <br />
      <button type="submit">Submit</button>
      <br />
      <br />
      <h2>{message}</h2>
    </form>
  );
}

С помощью хука useState() мы создаем переменную состояния для хранения текущего значения каждого поля ввода. Мы также создали еще одну переменную состояния (message), которая будет обновляться значениями полей ввода после того, как пользователь отправит форму.

Мы устанавливаем встроенный обработчик событий onChange для каждого поля ввода, чтобы обработчик вызывался при каждом изменении поля ввода. В каждом обработчике мы используем свойство target объекта Event, который обработчик получает для доступа к объекту элемента input. Свойство value этого объекта содержит входное значение, поэтому мы передаем его функции обновления состояния, чтобы обновить значение этого конкретного ввода.

Элемент button в форме имеет type из submit, поэтому каждый раз, когда пользователь щелкает его, запускается событие отправки. Мы устанавливаем обработчик события onSubmit в форме для прослушивания этого события. В этом обработчике мы вызываем preventDefault() для объекта Event, чтобы предотвратить обновление страницы при отправке формы.

Чтобы получить входные значения в этом обработчике событий после отправки формы, мы просто обращаемся к переменным состояния firstName и lastName.

Получить входное значение при отправке формы с помощью event.target

Мы также можем получить значение ввода формы при отправке с помощью свойства target объекта Event. Это полезно в тех случаях, когда мы не отслеживаем входное значение с помощью переменной состояния, т. е. неконтролируемый ввод.

App.js

import { useState } from 'react';
export default function App() {
  const [message, setMessage] = useState('');
  const handleSubmit = (event) => {
    event.preventDefault();
    const firstName = event.target.firstName.value;
    const lastName = event.target.lastName.value;
    setMessage(`Hello ${firstName} ${lastName}!`);
    event.target.reset();
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        id="firstName"
        name="firstName"
        placeholder="First Name"
      />
      <br />
      <br />
      <input
        type="text"
        id="lastName"
        name="lastName"
        placeholder="Last Name"
      />
      <br />
      <br />
      <button type="submit">Submit</button>
      <br />
      <br />
      <h2>{message}</h2>
    </form>
  );
}

В обработчике событий onSubmit свойство target объекта Event возвращает объект элемента формы (типа HTMLFormElement).

Поскольку мы устанавливаем реквизит name для элемента input, объект элемента формы будет содержать свойство с тем же именем, которое возвращает объект элемента input, т. е. после установки name в firstName для элемента input мы можем получить доступ к объекту элемента для этого input со свойством firstName объекта элемента form.

После получения значения каждого ввода и отображения сообщения мы вызываем метод reset() для объекта элемента формы, чтобы восстановить значения по умолчанию для элементов ввода формы. Вот как мы очищаем текст в полях ввода в этом примере, поскольку они не контролируются переменными состояния.

Получить входное значение при отправке формы с ссылкой

Мы также можем использовать ссылку на компонент, чтобы получить значение неконтролируемого ввода формы при отправке.

App.js

import { useState, useRef } from 'react';
export default function App() {
  const [message, setMessage] = useState('');
  const firstNameRef = useRef(undefined);
  const lastNameRef = useRef(undefined);
  const handleSubmit = (event) => {
    event.preventDefault();
    const firstName = firstNameRef.current.value;
    const lastName = lastNameRef.current.value;
    setMessage(`Hello ${firstName} ${lastName}!`);
    event.target.reset();
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        id="firstName"
        name="firstName"
        placeholder="First Name"
        ref={firstNameRef}
      />
      <br />
      <br />
      <input
        type="text"
        id="lastName"
        name="lastName"
        placeholder="Last Name"
        ref={lastNameRef}
      />
      <br />
      <br />
      <button type="submit">Submit</button>
      <br />
      <br />
      <h2>{message}</h2>
    </form>
  );
}

Данные в контролируемом вводе обрабатываются состоянием React, но в случае неконтролируемого ввода они обрабатываются самой DOM. Вот почему input в приведенном выше примере не имеет установленного реквизита value или обработчика событий onChange. Вместо этого мы получаем доступ к значению поля ввода с помощью React ref. DOM обновляет это значение при изменении текста на входе.

Для каждого input мы создаем объект ref с хуком useRef() и устанавливаем его в ref реквизит input. При этом для свойства current объекта ref устанавливается объект DOM, представляющий элемент input.

useRef() возвращает изменяемый объект ref, значение которого не меняется при обновлении компонента. Кроме того, изменение значения свойства current этого объекта не приводит к повторному рендерингу. Это отличается от функции обновления setState, возвращаемой из useState().

Хотя документация React рекомендует использовать контролируемые компоненты, неконтролируемые компоненты имеют некоторые преимущества. Вы можете предпочесть их, если форма очень проста и не требует мгновенной проверки, а доступ к значениям требуется только при отправке формы.

Первоначально опубликовано на codingbeautydev.com

Все сумасшедшие вещи, которые делает JavaScript

Увлекательное руководство по тонким предостережениям и менее известным частям JavaScript.

Зарегистрируйтесь и немедленно получите бесплатную копию.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.