React: вызов onChange только после нажатия Enter

Быстрый ответ

Для осуществления связи события onChange с нажатием клавиши Enter, воспользуйтесь нижеприведённым кодом:

<input onKeyPress={e => e.key === 'Enter' && ваша_обработчик_события(e)} />

В место ваша_обработчик_события подставьте нужную вам функцию. Данный код ассоциирует событие с элементом ввода, активизируясь при нажатии клавиши Enter.

Развернутые решения и случаи

Обработка клавиатурных событий и управление состоянием

В React для организации контроля за значением поля input с использованием хука useState и обновлением состояния при каждом нажатии клавиши предлагается сделать следующим образом:

const [inputValue, setInputValue] = React.useState('');

const handleOnChange = (e) => {
  setInputValue(e.target.value);  // Обновляем значение с каждым вводом
};

const handleKeyPress = (e) => {
  if(e.key === 'Enter') {
    console.log('Нажата клавиша Enter!', inputValue);  
  }
};

<input value={inputValue} onChange={handleOnChange} onKeyPress={handleKeyPress} />

Подробнее об этом расскажет наш спикер на видео

Отключение стандартной отправки формы

Для предотвращения стандартного механизма отправки формы при нажатии Enter, можно применить e.preventDefault():

  const handleKeyPress = (e) => {
  if(e.key === 'Enter') {
    e.preventDefault();  // Останавливаем отправку формы
    // Ваша дальнейшая логика
  }
};

Управление состоянием при отправке формы

Примените setSubmitted в состоянии для отслеживания отправки формы:

  const [submitted, setSubmitted] = React.useState(false);

  const handleSubmit = (e) => {
    // Изменяем состояние после выполнения условий
    setSubmitted(true);
  };

  // В onSubmit или внутри handleKeyPress на ваше усмотрение

Использование onKeyUp для обработки событий

Один из менее инвазивных способов обработки событий – это использование onKeyUp, чтобы отслеживать действия после отпускания клавиши:

  <input onKeyUp={e => e.key === 'Enter' && ваша_обработчик_события(e)} />

Визуализация

Рассмотрим пример, когда клавиша Enter инициирует событие onChange:

Сравним поля ввода с дверьми, которые открываются и запускают события. Приведём пример перенастройки такой "двери":

  input.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
      this.blur();  // Отпускаем элемент
      this.dispatchEvent(new Event('change'));  // Запускаем событие
    }
  });

Теперь нажатие на Enter вызывает событие "onChange", словно это другое измерение!

Работаем со "классом" компонентов React

Обработка событий отлично работает как в классовых компонентах React.Component, так и в функциональных, использующих хуки.

Классовый компонент:

  class YourComponent extends React.Component {
    handleKeyPress = (e) => {
      if(e.key === 'Enter') {
        // Реакция на клавишу Enter!
      }
    }

    render() {
      return <input onKeyPress={this.handleKeyPress} />;
    }
  }

Функциональный компонент и хуки:

  const YourComponent = () => {
    const handleKeyPress = (e) => {
      if(e.key === 'Enter') {
        // Реакция на клавишу Enter!
      }
    }

    return <input onKeyPress={handleKeyPress} />;
  }

Не забывайте про событие onBlur

onBlur может стать отличной дополнительной функцией валидации, поскольку не только Enter инициирует процессы:

  <input onBlur={e => вашаФункция_валидации(e)} />

Клавиша Enter под любым другим названием

Предпочтительнее обходиться без устарелого keyCode. Используйте e.key, чтобы определить нажатие Enter, поскольку 'Enter' гораздо понятнее, чем '13':

  const handleKeyPress = (e) => {
    if(e.key === 'Enter') {
      // Нажатие на Enter успешно установлено!
    }
  };

Полезные материалы

1. HTMLElement: событие change – Веб-API | MDN — Полный обзор события change.
2. Как вручную вызвать событие onchange? – Stack Overflow — Методы ручного вызова события onChange.
3. Обработка событий – React — Официальное руководство по обработке событий в React.
4. Всплытие и погружение — Фундаментальные концепции для веб-разработчиков на JavaScript.
5. Валидация формы на клиенте – JavaScript — Ознакомьтесь с валидацией на клиентской стороне.
6. onKeyPress vs onKeyUp и onKeyDown – Stack Overflow – Сравнение разных событий нажатия клавиш.
7. Троттлинг и дебаунсинг, объяснение на примерах | CSS-Tricks — Рекомендуемые материалы для понимания оптимизации событий в JavaScript.