Обработка событий onChange — это фундаментальный аспект создания интерактивных веб-приложений с помощью TypeScript и React. В этой статье мы рассмотрим различные методы эффективной обработки событий onChange в среде TypeScript и React. Мы рассмотрим популярные подходы и по ходу дела предоставим примеры кода. Итак, хватайте свой любимый напиток и вперед!

Метод 1: встроенная стрелочная функция
Одним из распространенных подходов является использование встроенной стрелочной функции непосредственно в атрибуте onChange входного элемента. Этот метод позволяет вам определить встроенный обработчик событий без необходимости использования дополнительных методов класса или привязок.

<input type="text" onChange={(event) => console.log(event.target.value)} />

Метод 2: привязка метода класса
Другой подход заключается в привязке метода класса к экземпляру компонента. Этот метод полезен, когда у вас сложная логика или вам необходимо получить доступ к состоянию и реквизитам компонента в обработчике событий.

class MyComponent extends React.Component {
  handleChange(event) {
    console.log(event.target.value);
  }
  render() {
    return <input type="text" onChange={this.handleChange.bind(this)} />;
  }
}

Метод 3: функциональный компонент с хуком useState
Если вы используете функциональные компоненты, вы можете использовать хук useState для управления состоянием компонента. Такой подход позволяет обрабатывать события onChange и лаконично обновлять состояние.

import React, { useState } from 'react';
function MyComponent() {
  const [value, setValue] = useState('');
  const handleChange = (event) => {
    setValue(event.target.value);
  };
  return <input type="text" value={value} onChange={handleChange} />;
}

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

import debounce from 'lodash/debounce';
function MyComponent() {
  const handleChange = debounce((event) => {
    console.log(event.target.value);
  }, 300);
  return <input type="text" onChange={handleChange} />;
}

Метод 5: использование контролируемых компонентов
Управляемые компоненты — это мощная концепция в React, где состояние компонента является единственным источником достоверной информации о его отображаемом значении. Используя контролируемые компоненты, вы можете полностью контролировать входное значение и соответствующим образом обновлять его в обработчике событий onChange.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }
  handleChange(event) {
    this.setState({ value: event.target.value });
  }
  render() {
    return <input type="text" value={this.state.value} onChange={this.handleChange.bind(this)} />;
  }
}

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