Ручной триггер события click в ReactJS: пример кода

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

Для того чтобы в ReactJS вручную инициировать события клика, используйте ref, представляющий ссылку на соответствующий элемент, и вызовите в контексте этого элемента метод click(). Пример:

import React, { useRef } from 'react';

function MyButton() {
  const btnRef = useRef();

  // Функция для симуляции клика
  const simulateClick = () => {
    btnRef.current?.click();
  };

  return (
    <>
      <button ref={btnRef} onClick={() => alert('Кликнуто!')}>Кликните меня</button>
      <button onClick={simulateClick}>Симуляция клика</button>
    </>
  );
}

В этом примере с использованием хука useRef создаётся ссылка btnRef на первую кнопку, затем функцией simulateClick вызывается метод click() у btnRef.current, что имитирует клик по этой кнопке.

Детальный разбор

Использование refs: ключ к DOM

В то время как в React основным является декларативный подход к управлению DOM, в ряде случаев необходим прямой доступ к DOM-элементам. Предоставить такую возможность позволяют refs. Для функциональных компонентов используется хук useRef, для классовых — React.createRef.

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

Особенности вызова событий вручную

При решении вручную инициировать события следует учесть ряд нюансов:

• Лексическое окружение: в классовых компонентах для сохранения контекста this используйте стрелочные функции.
• Хранение refs: в классовых компонентах refs обычно присваиваются как свойства класса.
• Вложенность компонентов: проверьте корректность расположения элементов в render-методе компонента.
• Предотвращение стандартного поведения: чтобы контролировать стандартную реакцию на события, используйте e.preventDefault().

Нюансы и потенциальные сложности

Хуки в функциональных компонентах

В функциональных компонентах для работы с DOM-узлами предпочтительно использовать хук useRef, который сохраняет своё значение между рендерами. Пример:

const MyFunctionalButton = () => {
  const inputFile = useRef(null);

  const handleFileInputClick = () => {
    inputFile.current.click();
  };

  return (
    <div>
      <input
        type="file"
        ref={inputFile}
        style={{ display: 'none' }}
        onChange={handleChange}
      />
      <div onClick={handleFileInputClick}>Загрузить файл</div>
    </div>
  );
};

Работа с классовыми компонентами

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

class MyClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputFile = React.createRef();
  }

  handleFileInputClick = () => {
    this.inputFile.current.click();
  };

  // ...остальное содержимое класса
}

Отслеживание изменений в компоненте

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

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

Рассмотрим пример, где ref связан с кнопкой:

<button ref={buttonRef}>Большая красная кнопка</button>

Для того чтобы инициировать клик вручную, достаточно вызвать метод click():

buttonRef.current.click(); // 💥🔴

Это сделает видимым следующий эффект:

До: [Большая Красная Кнопка Неактивна]
После: [Большая Красная Кнопка *Кликнута*]

Таким образом, из вашего JavaScript-кода симулируется событие клика.

Использование обратных вызовов ref

Обратные вызовы ref могут предоставить более гибкий контроль за назначением ref:

function MyInputComponent() {
  const setMyInputRef = (element) => {
    if (element) {
      // Теперь элемент доступен...
    }
  };

  return <input ref={setMyInputRef} />;
}

Избегание ненужных перерендеров

Если вы передаёте обратный вызов ref в дочерний компонент, являющийся Чистым Компонентом или использующим React.memo, изменение самой функции может вызвать нежелательные перерисовки.

Генерация пользовательских событий

Вполне возможно создание пользовательских событий через Event или CustomEvent, а их инициирование — с использованием метода dispatchEvent на ссылке:

const myCustomEvent = new CustomEvent('my-event', { detail: { some: 'data' } });
buttonRef.current.dispatchEvent(myCustomEvent);

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

1. Обработка событий – React — детальное руководство по обработке событий в React.
2. MouseEvent: конструктор MouseEvent() – WEB API | MDN — справочная информация о конструкторе MouseEvent.
3. SyntheticEvent – React — особенности работы с событиями в среде React.
4. Проблемы · facebook/react · GitHub — обсуждение и отслеживание проблем, связанных с React, на площадке GitHub.
5. Статья на Medium – Как инициировать событие клика в React — практическое руководство по инициированию событий клика.
6. Использование доступных по цене 433 МГц радиомодулей с Arduino – YouTube — видеоурок, посвященный теме инициации событий клика (несмотря на название).