React.js点击图片时两张均消失，如何实现仅单张消失？

我来帮你搞定这个问题！你现在遇到的核心问题是：用了同一个状态变量控制所有图片的显示/隐藏——不管点击哪张图，都会切换全局的addClass状态，导致两张图片同时加上gone类消失。咱们需要给每张图片单独维护状态，这样点击哪张就只切换哪张的状态。

修改思路 #

• 把单一的addClass状态改成一个对象（或数组），用来记录每张图片的隐藏状态
• 点击事件传入对应图片的唯一标识（比如id），只更新该图片的状态
• 渲染时根据每张图片的标识判断是否添加隐藏类

修改后的代码 #

class Home extends Component {
  constructor(props) {
    super(props);
    // 用对象存储每张图片的隐藏状态，初始都为false（显示）
    this.state = { hiddenImages: {} };
  }

  // 接收图片id，切换对应图片的隐藏状态
  handleClick = (imageId) => {
    this.setState(prevState => ({
      hiddenImages: {
        ...prevState.hiddenImages,
        [imageId]: !prevState.hiddenImages[imageId]
      }
    }));
  }

  render() {
    return (
      <div>
        <img
          id="beer1"
          className={`beer ${this.state.hiddenImages.beer1 ? 'gone' : ''}`}
          src="/images/beer1.png"
          onClick={() => this.handleClick('beer1')}
        />
        <img
          id="beer2"
          className={`beer ${this.state.hiddenImages.beer2 ? 'gone' : ''}`}
          src="/images/beer2.png"
          onClick={() => this.handleClick('beer2')}
        />
      </div>
    );
  }
}

关键改动说明 #

• 状态结构调整：用hiddenImages对象代替单一的addClass，每个key对应图片id，值为布尔值表示是否隐藏
• 点击事件优化：handleClick现在接收图片id，通过函数式更新state（prevState）来确保状态更新的正确性，避免异步更新问题
• 类名判断：每张图片单独判断自己的id是否在hiddenImages中为true，只给当前点击的图片添加gone类

如果之后需要添加更多图片，这个方案也能轻松扩展——只需要给新图片一个唯一id，然后在点击事件中传入该id即可。

内容的提问来源于stack exchange，提问作者Steve