ReactJS，改变存储在状态数组中的img src

Question

所以，首先，我要做的是以下内容：我有一些包含一些文本和图像的div。 div的所有数据都存储在状态数组中。你也可以添加div并删除你想要的div。我现在要实现的是在用户点击图像时更改图片。有一个预设的图像库，每当用户点击图像时，都应显示下一张图像。

这是一些相关的代码：

let clicks = 0;
class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data : [
                createData( someimage, "Image 1"),
                createData( anotherimage, "Image 2"),
                createData( thirdimage, "Image 3"),
                createData( fourthimage, "Image 4"),
             ],
        imgs : [imgsrc1,imgsrc2, imgsrc3, imgsrc4],
        }
    }

newIcon (n) {
    let newStateArray = this.state.data.slice();
    let newSubStateArray = newStateArray[n].slice();

        if(clicks === 1) {

            newSubStateArray[0] = this.state.imgs[0];
            this.setState({imgsrc:newSubStateArray});
            clicks++;
        } else if (clicks === 2) {

            newSubStateArray[0] = this.state.imgs[1];
            this.setState({imgsrc:newSubStateArray});
            clicks++;
        } else if (clicks === 3) {

            newSubStateArray[0] = this.state.imgs[2];
            this.setState({imgsrc:newSubStateArray});
            clicks++;
        } else if (clicks === 4) {

            newSubStateArray[0] = this.state.imgs[4];
            this.setState({imgscr:newSubStateArray});
            clicks++;
        } 
    }           

render () {
    let { data }= this.state;
    return(
        <div>

            {data.map((n) => {
                return(
                <Child imgsrc={n.imgsrc} key={n} newIcon={this.newIcon.bind(this, n)} header={n.header} />
                );
            })}

        </div>
    );
}

一些旁注：createArray是一个创建子数组的函数，对于这个问题可能会被忽略。重要的是要知道，第一个元素叫做imgsrc，第二个元素叫做

所以，这里出了点问题，但我不确定它究竟是什么。我的猜测是，我没有正确访问数组中的值。在上面，您可以看到我尝试切片数组然后分配新值。我遇到的另一个问题是，当我尝试从我的newIcon()函数调用时，n出现为未定义。我有点迷失在这里，因为我对React很新，所以欢迎任何提示和建议。

Answer 1

我会废除newIcon中的所有代码，并保持clicks作为州的一部分。如果你有一个图像数组，那么你可以使用clicks作为指向应该显示的下一个图像的指针。

在这个例子中，我冒昧地添加虚拟图像以帮助解释，并将clicks更改为pointer，因为它更有意义。

class Parent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {

      // clicks is called `pointer` here and initially
      // is set to the first index of the imgs array
      pointer: 0,
      imgs: [
        'https://dummyimage.com/100x100/000000/fff.png',
        'https://dummyimage.com/100x100/41578a/fff.png',
        'https://dummyimage.com/100x100/8a4242/fff.png',
        'https://dummyimage.com/100x100/428a49/fff.png'
      ]
    };

    // Bind your class method in the constructor
    this.handleClick = this.handleClick.bind(this);
  }

  // Here we get the length of the imgs array, and the current
  // pointer position. If the pointer is at the end of the array
  // set it back to zero, otherwise increase it by one.
  handleClick() {
    const { length } = this.state.imgs;
    const { pointer } = this.state;
    const newPointer =  pointer === length - 1 ? 0 : pointer + 1;
    this.setState({ pointer: newPointer });
  }

  render() {

    const { pointer, imgs } = this.state;

    // Have one image element to render. Every time the state is
    // changed the src of the image will change too.
    return (
      <div>
          <img src={imgs[pointer]} onClick={this.handleClick} />
      </div>
    );
  }

}

DEMO

编辑：因为您有多个div需要更改源的图像，可能会在父组件中保留一组图像，然后将这些图像的子集传递给每个图像组件作为道具然后存储在每个图像组件中组件的状态。这样你就不需要那么多地改变Image组件。

class Image extends React.Component {

  constructor(props) {
    super(props);
    this.state = { pointer: 0, imgs: props.imgs };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const { length } = this.state.imgs;
    const { pointer } = this.state;
    const newPointer =  pointer === length - 1 ? 0 : pointer + 1;
    this.setState({ pointer: newPointer });
  }

  render() {

    const { pointer, imgs } = this.state;

    return (
      <div>
          <img src={imgs[pointer]} onClick={this.handleClick} />
      </div>
    );
  }

}

class ImageSet extends React.Component {

   constructor() {
     super();
     this.state = {
       imgs: [
        'https://dummyimage.com/100x100/000000/fff.png',
        'https://dummyimage.com/100x100/41578a/fff.png',
        'https://dummyimage.com/100x100/8a4242/fff.png',
        'https://dummyimage.com/100x100/428a49/fff.png',
        'https://dummyimage.com/100x100/bd86bd/fff.png',
        'https://dummyimage.com/100x100/68b37c/fff.png',
        'https://dummyimage.com/100x100/c9a7c8/000000.png',
        'https://dummyimage.com/100x100/c7bfa7/000000.png'
      ]
     }
   }

   render() {

     const { imgs } = this.state;

     return (
       <div>
         <Image imgs={imgs.slice(0, 4)} />
         <Image imgs={imgs.slice(4, 8)} />
       </div>
     )
   }

}

DEMO

希望有所帮助。

Answer 2

尝试在构造函数中绑定newIcon（）方法，如下所示：

this.newIcon = this.newIcon.bind(this);

并且在render方法中正常调用它而没有任何绑定：

this.newIcon(n)