반응 모달에서 종료 이벤트를 구현하는 방법

반응 모달에서 닫기 이벤트를 구현하는 방법: 1. 브라우저 onclick 이벤트의 대상을 수신합니다. 2. "if (e.target != messageRef.current) {setMessageCode(false);}를 통해 클릭 이벤트를 판단합니다. " 문이 아닌 경우 모달 상자의 닫기 이벤트를 실행합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, React18 버전, Dell G3 컴퓨터.

반응 모달에서 종료 이벤트를 구현하는 방법은 무엇입니까?

React는 다른 곳을 클릭하여 모달 상자를 닫습니다.

원리: 매우 간단합니다. 브라우저 onclick 이벤트의 대상을 듣고 클릭 이벤트를 결정하고 모달 상자가 아닌 경우 닫기 이벤트를 실행하는 것입니다.

서버 측 렌더링은 useEffect

useLayoutEffect(() => {
    window.addEventListener("click", (e) => {
      if (e.target != messageRef.current) {
        setMessageCode(false);
      }
    });
  }, []);```

const messageRef = useRef(null);

```

useLayoutEffect의 함수 서명은 useEffect와 동일하지만 모든 DOM 변경 후에 효과를 동기적으로 호출합니다. 이를 사용하여 DOM 레이아웃을 읽고 동기식으로 다시 렌더링을 트리거할 수 있습니다. 브라우저가 그리기를 수행하기 전에 useLayoutEffect 내부의 업데이트 계획이 동기적으로 새로 고쳐집니다.

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응 모달에서 종료 이벤트를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!