React хук useClickInside

ReactReactBeginner

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом практическом занятии мы научимся создавать пользовательский хук React под названием useClickInside. Этот хук будет обрабатывать событие клика внутри обёрнутого компонента и запускать функцию обратного вызова. Мы будем использовать хуки useEffect() и useRef() для добавления и очистки события click. В конце этого практического занятия вы будете лучше понимать, как создавать пользовательские хуки и обрабатывать события в React.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react(("React")) -.-> react/StylingGroup(["Styling"]) react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/event_handling("Handling Events") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StylingGroup -.-> react/css_in_react("CSS in React") subgraph Lab Skills react/jsx -.-> lab-38372{{"React хук useClickInside"}} react/event_handling -.-> lab-38372{{"React хук useClickInside"}} react/hooks -.-> lab-38372{{"React хук useClickInside"}} react/css_in_react -.-> lab-38372{{"React хук useClickInside"}} end

Хук React useClickInside

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

Для обработки события клика внутри компонента вы можете создать пользовательский хук под названием useClickInside, который принимает ref и callback. Используйте хук useEffect() для добавления и очистки события click, а хук useRef() для создания ref для компонента клика и передайте его в хук useClickInside. Вот код:

const useClickInside = (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);
    };
  }, [ref, callback]);
};

Вы можете использовать этот хук в своем компоненте так:

const ClickBox = ({ onClickInside }) => {
  const clickRef = React.useRef();
  useClickInside(clickRef, onClickInside);

  return (
    <div
      className="click-box"
      ref={clickRef}
      style={{
        border: "2px dashed orangered",
        height: 200,
        width: 400,
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      }}
    >
      <p>Click inside this element</p>
    </div>
  );
};

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

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

Резюме

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