动态改变颜色 ReactJS答案

【问题标题】：Dynamically changing colors ReactJS动态改变颜色 ReactJS
【发布时间】：2018-12-31 02:14:30
【问题描述】：

好的，我对 React 还很陌生，所以这是我的问题....我确实设法动态渲染了 5 个球组件，我想要实现的是每次单击球时，球会改变颜色并停留这样，直到再次单击该球时，该球返回默认颜色。还可以更改多个球的颜色，例如更改 1 3 5 的颜色，但再次单击它们时再次恢复默认颜色...有什么想法吗？

.Ball {
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #3d3c3a;
    border-radius: 100%;
    float: left;
    background-color: #fff;
    margin: 20px;
    font-weight: 500;
    box-shadow: 1px 1px 0.5px #000;
    align-items: center;
    cursor: pointer
}

 const balls = props => {
  return (
    <Aux>
      <p className={classes.Ball} id={props.id} onClick={props.clicked}>
        {props.number}
      </p>
    </Aux>
  );
};

class Game extends Component {
  state = {
    ids: [
      { id: 1 },
      { id: 2 },
      { id: 3 },
      { id: 4 },
      { id: 5 }
    ],
    chosenBallsIds: []
  };



  clickedBallHandler = ballIndex => {
    let chosenBallsIds = this.state.chosenBallsIds;
    if (chosenBallsIds.includes(ballIndex)) {
      let index = chosenBallsIds.indexOf(ballIndex);
      if (index > -1) {
        chosenBallsIds.splice(index, 1);
      }
    } else {
      chosenBallsIds.push(ballIndex);
    }

    if (chosenBallsIds.length >= 9) {
      chosenBallsIds.pop();
    }

    chosenBallsIds.sort(function(a, b) {
      return a - b;
    });

    this.setState({
      chosenBallsIds: chosenBallsIds
    });

  };


  render() {
    let balls = null;
    balls = (
      <div>
        {this.state.ids.map((ball, index) => {
          return (
            <Balls
              key={ball.id}
              number={ball.id}
              clicked={() => this.clickedBallHandler(index + 1)}
              id={index + 1}
            />
          );
        })}
      </div>
    );


    return (
      <Aux>
        <div className={classes.Balls}>{balls}</div>
      </Aux>
    );
  }
}

export default Game;

【问题讨论】：

你找到解决办法了吗？
嘿，不，我没有找到任何解决方案......在同一个应用程序中做了一大堆其他的东西，它已经完成了，只是这个......我还在寻找解决方案。所以我在渲染方法中使用 .map 生成每个球，并将每个点击的球保存在 selectedBallsIds 数组中，但它没有响起任何铃声如何实现为球着色......还有更多帮助吗？
你看过我关于css动态属性的帖子了吗？您可以使用动态字符串，传入与您所在州不同的值，并从您所在州的十六进制值数组中传递值。
你的类似于 style={{background-color: #${this.state.hex}}}

标签： reactjs

【解决方案1】：

您可能想查看dynamic properties。这将允许您为每次点击设置不同的背景颜色。另外，我会考虑设置一个十六进制颜色数组，然后当用户单击时，您可以根据需要将状态设置为数组中的新项目。您的 if 语句很复杂，可能不需要。

【讨论】：