Question

我有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>
    );

Answer 1

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

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

在CircleComponent内部，您将拥有每个Component的状态，并为每个Component进行切换。也不要忘记按键。

Answer 2

没有尝试过，但是您应该了解这个概念。

this.state = {
    fillCircle: [false,false,false]
};

  circleHandler = (i) => {
        this.setState((prev) => {
            if(prev.fillCircle[i] == false)prev.fillCircle = [false,false,false] // <--
            prev.fillCircle[i] = !prev.fillCircle[i];
            return prev.fillCircle;
        });
  };

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

Answer 3

@Dille请尝试以下代码，这应该可以解决您的问题。

this.state = {
          activeCircle: null
        };

      circleHandler = (i) => {
        this.setState({ activeCircle: i});
      };

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

反应，将状态应用于循环中的单个元素

3 个答案: