Получить значение ввода при нажатии клавиши Enter в React

Учебник о том, как легко получить значение поля ввода при нажатии клавиши Enter в React.

Чтобы получить значение ввода при нажатии клавиши Enter в React:

1. Создайте переменную состояния для хранения значения ввода.
2. Установите обработчик событий onChange для ввода, чтобы обновлять переменную состояния при изменении значения поля ввода.
3. Установите обработчик событий onKeyDown на входе.
4. Используйте переменную состояния для доступа к входному значению в обработчике событий после проверки того, что нажата клавиша Enter.

Например:

App.js

import { useState } from 'react';
export default function App() {
  const [message, setMessage] = useState('');
  const [updated, setUpdated] = useState('');
  const handleChange = (event) => {
    setMessage(event.target.value);
  };
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      // 👇 Get input value
      setUpdated(message);
    }
  };
  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        value={message}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
      />
      <h2>Message: {message}</h2>
      <h2>Updated: {updated}</h2>
    </div>
  );
}

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

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

После настройки контролируемого ввода теперь мы можем использовать message вне обработчика handleChange для доступа к текущему значению поля ввода.

Мы используем свойство event.key, чтобы получить нажатие клавиши в обработчике события onKeyDown. Убедившись, что эта клавиша — Enter, мы используем setUpdated(message) для обновления переменной updated текущим значением поля ввода.

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

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

import { useState } from 'react';
export default function App() {
  const [updated, setUpdated] = useState('');
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      setUpdated(event.target.value);
    }
  };
  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        onKeyDown={handleKeyDown}
      />
      <h2>Updated: {updated}</h2>
    </div>
  );
}

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

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

import { useRef, useState } from 'react';
export default function App() {
  const inputRef = useRef(null);
  const [updated, setUpdated] = useState('');
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      setUpdated(inputRef.current.value);
    }
  };
  return (
    <div>
      <input
        ref={inputRef}
        type="text"
        id="message"
        name="message"
        onKeyDown={handleKeyDown}
      />
      <h2>Updated: {updated}</h2>
    </div>
  );
}

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

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

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

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

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

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

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

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