Reactモーダルで終了イベントを実装する方法

React モーダル メソッドを使用して終了イベントを実装します: 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 ビデオ チュートリアル 」

以上がReactモーダルで終了イベントを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。