Этот пост о том, как создать внешний обработчик кликов в React, используя createRef(). Есть хуки, которые можно установить для этого, но я хотел попробовать разобраться сам. Функция, которую я создал:

Как вы можете видеть выше, при нажатии на ввод поиска заполнитель, значок поиска перемещается влево, и появляется значок отмены. При щелчке за пределами ввода они возвращаются в исходное положение, а значок отмены исчезает. Давайте посмотрим на коды ниже:

class Header extends Component {
constructor() {
super();
this.state = {
  searchInput: “”,
  searchIcon: false,
  searchPlaceholder: false,
  cancelIcon: false
};
this.searchRef = React.createRef();
}
  1. Я установил состояния searchIcon, searchPlaceholder и cancelIcon, как указано выше, а затем создал searchRef с помощью React.createRef(). Согласно официальной документации React, ссылки предоставляют способ доступа к узлам DOM или элементам React, созданным в методе рендеринга. Ссылки можно использовать, когда мы управляем фокусом, выделением текста или воспроизведением мультимедиа. Их не следует чрезмерно использовать для всего, что можно сделать декларативно. Refs обычно назначаются в конструкторе, чтобы на них можно было ссылаться во всем компоненте.
<input
ref={this.searchRef}
/>

2. Затем ссылка добавляется к элементу DOM, в данном случае input, с использованием атрибута ref.

clickOutside = (e) => {
if (!this.searchRef.current.contains(e.target)) {
const { searchIcon, searchPlaceholder, cancelIcon } = this.state;
this.setState({
  searchIcon: !searchIcon,
  searchPlaceholder: !searchPlaceholder,
  cancelIcon: !cancelIcon,
  });
 }
};

3. Теперь у нас есть ссылка на поисковый ввод, я создал функцию обработчика событий с помощью contains(), которая проверяет, не содержит ли searchRef e.target, состояния иконок и плейсхолдера устанавливаются противоположными. Это обнаружит щелчок за пределами ввода поиска и вернет значки и заполнитель в исходное положение. У меня также есть отдельный обработчик onClick, который перемещает свои позиции при нажатии на ввод.

componentDidMount() {
document.addEventListener(“click”, this.clickOutside);
}
componentWillUnmount() {
document.removeEventListener(“click”, this.clickOutside);
}

4. Я добавил прослушиватель событий clickOutside в componentDidMount(). Он вызывается сразу после монтирования компонента. Инициализация, требующая узлов DOM, должна идти здесь. Затем я также добавил componentWillUnmount(), чтобы удалить прослушиватель событий, который представляет собой функцию, вызываемую непосредственно перед удалением компонента из DOM. Обычно он используется для очистки любого элемента DOM или таймера, созданного в componentDidMount().