React хук useClickOutside

Введение

В этом практическом занятии мы научимся использовать хук useClickOutside в React для обработки событий клика, происходящих вне определенного компонента. Этот пользовательский хук позволяет легко определить, когда пользователь кликает вне определенного компонента, и выполнять действие на основе этого события. В конце практического занятия вы будете лучше понимать, как использовать этот хук для создания более интерактивных и удобных для пользователя компонентов в своих React-приложениях.

Skills Graph

React хук useClickOutside

В ВМ уже предоставлены index.html и script.js. В общем, вам нужно только добавить код в script.js и style.css.

Этот код обрабатывает событие клика вне обёрнутого компонента. Он работает путём создания пользовательского хука, который принимает ref и callback для обработки события click. Хуки useEffect() используется для добавления и очистки события click, в то время как хук useRef() используется для создания ref для компонента клика и передачи его в хук useClickOutside.

const useClickOutside = (ref, callback) => {
  const handleClick = (e) => {
    if (ref.current && !ref.current.contains(e.target)) {
      callback();
    }
  };
  React.useEffect(() => {
    document.addEventListener("click", handleClick);
    return () => {
      document.removeEventListener("click", handleClick);
    };
  });
};

const ClickBox = ({ onClickOutside }) => {
  const clickRef = React.useRef();
  useClickOutside(clickRef, onClickOutside);
  return (
    <div
      className="click-box"
      ref={clickRef}
      style={{
        border: "2px dashed orangered",
        height: 200,
        width: 400,
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      }}
    >
      <p>Click out of this element</p>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <ClickBox onClickOutside={() => alert("click outside")} />
);

Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по React хук useClickOutside. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.