web-dev-qa-db-ja.com

JSXでホバーしたときに画像を変更する

JSXでhoverのイメージを変更する方法

私はこのようなものを試しています：

<img src={require('../../../common/assets/network-inactive.png')}
onMouseOver={this.src = require('../../../common/assets/network.png')}
onMouseOut={this.src = require('../../../common/assets/network-inactive.png')} />
javascriptreactjsjsxonmouseoveronmouseout
6
new-boy-in-web-dev-business

このコードをReactコンポーネントで記述していると想定します。以下のようになります。

class Welcome extends React.Component {
  render() {
    return (
       <img src={require('../../../common/assets/network-inactive.png')}
       onMouseOver={this.src = require('../../../common/assets/network.png')}
       onMouseOut={this.src = require('../../../common/assets/network-inactive.png')} 
       />
    );
  }
}

この場合、this.srcのターゲティングは機能しません。これは、クラスでsrcという名前のものが本質的に検索されるためです。たとえば、this.srcは次のようなものを見つけることができます。

src = () => (alert("a source"))

しかし、それはあなたがやりたいことではありません。画像自体をターゲットにしたい。

したがって、<img />コンテキストを入力する必要があります。これは次のように簡単に実行できます。

 <img
    onMouseOver={e => console.log(e)}
  />

そこから、特にcurrentTargetプロパティをターゲットにできます。これは要素のコンテキストに入ります。だから今、あなたはこのようなことをすることができます：

  <img
    src="img1"
    onMouseOver={e => (e.currentTarget.src = "img2")}
  />

onMouseOutについても同じことができます。

あなたは確かにこれを再び行う必要があるので、あなたは他の要素でこれと同じ方法を使うことができます。ただし、これが唯一の解決策ではないので注意してください。大きなプロジェクトでは、ストア（ Redux ）を使用し、要素を変更するのではなく、小道具を渡すことを検討する必要があります。

14
typekev

最善の方法は、これを次の状態で管理することです。

class App extends Component {
  state = {
    img: "https://i.vimeocdn.com/portrait/58832_300x300"
  }

  render() {
    return (
      <div style={styles}>
        <img
          src={this.state.img}
          onMouseEnter={() => {
            this.setState({
              img: "http://www.toptipsclub.com/Images/page-img/keep-calm-and-prepare-for-a-test.png"
            })
          }}

          onMouseOut={() => {
            this.setState({
              img: "https://i.vimeocdn.com/portrait/58832_300x300"
            })
          }}
        />
      </div>
    )
  }
};

https://codesandbox.io/s/5437qm907l

4
max li