Reactで動的に画像を動かしたい

Question

前提・実現したいこと

Reactで画像がマウスと同じ位置に動いてほしいです。

発生している問題・エラーメッセージ

マウスの位置は座標で所得できており、stateとして保存しています。

        <img
            src={`${process.env.PUBLIC_URL}/node.png`}
            height="60px"
            width="60px"
            position="absolute"
            top={this.state.currentY}
            left={this.state.currentX}
            //height={this.state.currentX}
          />

実際に動的にtop,leftは変わってくれるのですが、imgは動いてくれません。

試したこと

heightがコメントアウトしてあるが、こちらはうまく動的に大きさが変わってくれます。

この方法自体が間違ってる場合、どのようにしたらうまく行くかご教授お願いします。

Answer 1

実際に動的にtop,leftは変わってくれるのですが、imgは動いてくれません。

<img>にtopやleftといった属性は存在しないので、無理やり書いても何の動作もしません。

CSSで指定してください。

<img
 style={{top: this.state.currentY, left=this.state.currentX}}
// 後略

Comments

[taiyaki29]

あ！そうでした！
ありがとうございます！！解決しました！