要素の横幅をリアルタイム取得する方法について

Question

componentDidMount内で下記のようにするとconsole.log内では上手くいくのですが、この値をsetStateして使うと上手くいかないです。
この値を使えるようにするにはどうしたらよいでしょうか？
他の書き方でもよいので要素の横幅をリアルタイムに取得したいです。
何卒よろしくお願いいたします．

//マップ幅の取得
    let map = document.getElementById("map");
    var lastInnerWidth = map.clientWidth;
    window.addEventListener("resize", function() {
      if (lastInnerWidth != map.clientWidth) {
        lastInnerWidth = map.clientWidth;
      }
      let boxSize = (lastInnerWidth - 100) / 5;
      console.log(lastInnerWidth);
      console.log(boxSize);
    });

//TypeError: this.setState is not a functionになる
let map = document.getElementById("map");
    var lastInnerWidth = map.clientWidth;
    window.addEventListener("resize", function() {
      if (lastInnerWidth != map.clientWidth) {
        lastInnerWidth = map.clientWidth;
      }
      let boxSize = (lastInnerWidth - 100) / 5;
      this.setState({
        mapWidth: lastInnerWidth,
        boxWidth: boxSize
      });
      console.log(this.state.mapWidth);
      console.log(this.state.boxWidth);
    });

Comments

[maisumakun]

setStateして、具体的にどううまく行かなかったのでしょうか（コンソールや画面などにメッセージは出てきましたか？）。

[Meganezaru]

最低限、コンポーネントの中身(render())がわからないと答えようがない気がします。コンポーネント全体のソースは掲載できないですか？

[hiroakitajima]

コメントありがとうございます。setStateを使おうとするとTypeError: this.setState is not a functionになってしまいます。共有できるソースにして共有したいと思います。引き続きよろしくお願いいたします。

Answer 1

イベントリスナーをfunctionで書いた場合、thisはイベントの起きたDOM要素になって、Reactのコンポーネントではなくなってしまいます。そのためsetStateができなくなります。

Arrow functionで書けば、thisは外側のthisをそのまま受け継ぎます。

Comments

[hiroakitajima]

ご回答ありがとうございます.
おっしゃる通りに変更したら上手くいきました！
勉強になりました。ありがとうございました。