Question

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

以下是一些相关代码：

ReferenceError: connect is not defined

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

所以，这里出了点问题，但我不确定它究竟是什么。我的猜测是，我没有正确访问数组中的值。在上面，您可以看到我尝试切片数组然后分配新值。我遇到的另一个问题是，当我尝试从window.connect = connect; - 函数调用时，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组件作为道具存储在每个组件的状态中。这样你就不需要那么多地改变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)

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

2 个答案: