Reactでモーダルの外をクリックするとモーダルが閉じる機能を作ったときに困ったことと対処法メモ

こちらはきちんと解決しました！

↓まとめた記事書きました！

2021年6月24日Reactでモーダル外をクリックしても閉じるモーダルの作り方と注意点【クラスコンポーネント編】

2021年6月21日Reactでモーダル外をクリックしても閉じるモーダルの作り方と注意点【関数コンポーネント編】

困ったこと

Reactでモーダルの外をクリックするとモーダルが閉じる機能をつけたいのに、ほかのページをクリックしてもその関数が動くので困ったんですよ。

（解決したけどあってるのか分からないので、間違ってたらすみません。）

原因

// モーダルをモーダル外をクリックしても閉じる
LinkShareClose2(){
  const TTK = window.addEventListener('click', (e) => {
    if(!e.target.closest('.modal')) {
     if(!e.target.closest('.btn_square')) {
       //ここに外側をクリックしたときの処理
       this.mounted && this.setState({isLinkShareOpen: false})
       this.mounted && this.setState({iscopyToClipboard: false});
       window.removeEventListener('click',TTK);
     }
   }
 })
}

クラスコンポーネントの中で定義していた↑の関数をrenderの中でthis.LinkShareClose2();して実行していたのが問題っぽい。

解決方法

renderの中のthis.LinkShareClose2();を消して、以下を追加しました。

// モーダルをモーダル外をクリックしても閉じる
LinkShareClose2(){
  const TTK = window.addEventListener('click', (e) => {
    if(!e.target.closest('.modal')) {
     if(!e.target.closest('.btn_square')) {
       //ここに外側をクリックしたときの処理
       this.mounted && this.setState({isLinkShareOpen: false})
       this.mounted && this.setState({iscopyToClipboard: false});
       window.removeEventListener('click',TTK);
     }
   }
 })
}

// ↓↓↓↓以下を追加↓↓↓↓
// マウント時、アンマウント時に実行させる。
componentDidMount() {
  this.mounted = true;
  this.mounted && this.LinkShareClose2();
}

componentWillUnmount() {
  this.mounted = false;
}

マウントがよくわからないけど←。
とりあえず、componentDidMount(){}の中に関数を書くと、勝手に実行してくれるみたい。
componentWillUnmount(){}の中に書くと、ほかのページに行った時に実行しないようにしてくれる。ありがたや～