ЯсноПонятно24

Для реализации закрытия формы при нажатии вне формы с использованием хука useEffect в React, можно использовать следующий подход:

import React, { useEffect, useRef, useState } from 'react';

const FormComponent = () => {
  const [isOpen, setIsOpen] = useState(true);
  const formRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (formRef.current && !formRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  return (
    <div ref={formRef}>
      {isOpen && (
        <form>
          {/* Форма */}
        </form>
      )}
    </div>
  );
};

export default FormComponent;

В этом примере мы используем хук useEffect для добавления слушателя события mousedown, который проверяет, было ли событие клика вне формы. Если событие клика произошло вне формы, то мы закрываем форму путем изменения состояния isOpen на false.

Также обратите внимание, что мы используем useRef для получения ссылки на элемент формы, чтобы проверить, было ли событие клика внутри формы или вне нее.

Надеюсь, это поможет вам реализовать закрытие формы при нажатии вне формы с использованием хука useEffect в React.