在 React Js 中更改图像 onClick

在 React Js 中更改图像可以通过点击事件触发 state 的更新来实现。以下是实现方法的详细介绍。

准备工作

在开始之前，我们需要引入 React 和 ReactDOM。

import React from 'react';
import ReactDOM from 'react-dom';

然后我们需要定义我们的组件。这个组件需要包含一个图片和一个按钮。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { img: "/path/to/image1.jpg" };
  }

  render() {
    return (
      <div>
        <img src={this.state.img} />
        <button onClick={this.handleClick}>Change Image</button>
      </div>
    );
  }
}

注意，我们在构造函数中初始化了 state 为 /path/to/image1.jpg，并在 render 方法中将这个 state 的值赋给了 <img> 的 src 属性。同时，我们在 <button> 上监听了 onClick 事件，并将事件处理函数 handleClick 绑定在了 this 上。

切换图像

现在，我们需要实现 handleClick 函数来实现点击按钮时更换图片的功能。

handleClick = () => {
  if (this.state.img === "/path/to/image1.jpg") {
    this.setState({ img: "/path/to/image2.jpg" });
  } else {
    this.setState({ img: "/path/to/image1.jpg" });
  }
}

判断当前图片的路径是否为 /path/to/image1.jpg，如果是，则设置 state 中的 img 属性为 /path/to/image2.jpg，否则设置为 /path/to/image1.jpg。

现在，当我们点击按钮时，就可以切换图片了。

完整代码

最终的代码如下：

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { img: "/path/to/image1.jpg" };
  }

  handleClick = () => {
    if (this.state.img === "/path/to/image1.jpg") {
      this.setState({ img: "/path/to/image2.jpg" });
    } else {
      this.setState({ img: "/path/to/image1.jpg" });
    }
  }

  render() {
    return (
      <div>
        <img src={this.state.img} />
        <button onClick={this.handleClick}>Change Image</button>
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));

总结

通过上面的介绍，我们可以看出，在 React 中更改图像的关键是通过监听 Click 事件，来更新 state 中的图片路径，从而实现图片更替。希望这篇文章能够帮助到你。