时间戳

首页 > 解决方案 > 反应，使状态适用于循环中的单个元素

javascript - 反应，使状态适用于循环中的单个元素

问题描述

我有 3 个圆圈在切换时应该更改图像的 src，目前所有圆圈在单击一个时都会切换 src。我可以使用一些帮助来解决该问题。

这就是我现在得到的

this.state = {
      fillCircle: false
    };

  circleHandler = () => {
    this.setState({ fillCircle: !this.state.fillCircle });
  };
 
 render() {
    let circles = [];
    for (var i = 0; i < 3; i++) {
      circles.push(
        <img
          key={i}
          className="circle"
          onClick={this.circleHandler.bind()}
          src={this.state.fillCircle ? filled_circle : circle}
          alt=""
        />
      );
    }
    return (
        <div>
         {circles}
        </div>
    );

标签： javascriptreactjs

解决方案

这是因为这些元素中的每一个都需要它自己的状态。为每个圆圈编写一个单独的组件。然后你会做

circles.push(<CircleComponent key={index} />)

在 CircleComponent 中，您将拥有每个组件的状态并为每个组件切换。不要忘记钥匙。

推荐阅读