在 JSX 中懸停時更改圖像

Question

如何在 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')} />

Answer 1

我假設您正在 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 )，並傳遞道具而不是改變元素。

Answer 2

最好是在狀態中管理這個：

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

Answer 3

這是使用功能組件和打字稿的非類方法：

interface IconProps {
  src?: string;
  srcOnHover?: string;
  alt?: string;
}

const Icon: React.FC<IconProps> = ({ src, srcOnHover, alt }) => (
  <img
    src={src}
    alt={alt}
    onMouseOver={(e): void => {
      srcOnHover && (e.currentTarget.src = srcOnHover);
    }}
    onMouseOut={(e): void => {
      srcOnHover && (e.currentTarget.src = src || '');
    }}
  />
);

它可以這樣使用：

<Icon src="path/to/image.png" srcOnHover="path/to/hover-image.png" alt="Description" />

Answer 4

這樣做的簡單方法：

class Home 擴展 React.Component { state = { icon: ICON_ONE }

render(){ return( <img src={this.state.icon} onMouseOver={()=>this.setState({icon:ICON_TWO})}
onMouseOut={() => this.setState({ icon: ICON_ONE })} /> ) }

Answer 5

另一種非類方法：

import arrow from "../images/arrow.svg";
import arrowHover from "../images/arrowHover.svg";

function Arrow() {
  const [over, setOver] = useState(false);
  return (
    <div
      onMouseOver={() => setOver(true)}
      onMouseOut={() => setOver(false)}
    >
         <img
          src={over ? arrowHover : arrow}
          alt="arrow"
          width="50"
          height="50"
        />
    </div>   
  )
}