javascript - 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，也许可以在父组件中保留一组图像，然后将这些图像的子集作为 props 传递给每个 Image 组件，然后您就可以存储在每个组件的状态中。这样您就不需要对 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

希望有帮助。