Question

当我点击＆＃34;照片容器＆＃34;中的图像时我得到了元素。

如何获取该元素的索引？

photoGallery(event) {
  console.log(event.target);
  this.setState({ imgSrc: event.target.src });
}

<div className="photo-container" onClick={e=> this.photoGallery(e)} >
  <img src="https://img1.jpg" alt="img-1" />
  <img src="https://img2.jpg" alt="img-2" />
  <img src="https://img3.jpg" alt="img-3" />
</div>

Answer 1

这是解决方案

解决方案A

如果您有不同的图像名称，则单击容器并获取不可行的值，您将无法找到索引。但是，在上面的示例中，您已经给出了img-1，img-2等有机会找出指数。

photoGallery(event, index) {
  console.log(event.target.alt.replace('img-',''));
  this.setState({ imgSrc: event.target.src });
} 

<div className="photo-container" onClick={e=> this.photoGallery(e)}>
    <img src="https://img1.jpg" alt="img-1" />
    <img src="https://img2.jpg" alt="img-2" />
    <img src="https://img3.jpg" alt="img-3" />
</div>

我建议解决方案B 。

不是在容器上添加click事件，而是绑定图像本身上的click事件，以便在需要时获取正确的索引和其他详细信息。

photoGallery(event, index) {
  console.log(event.target);
  this.setState({ imgSrc: event.target.src });
}

<div className="photo-container">
  <img src="https://img1.jpg" alt="img-1" onClick={this.photoGallery.bind(this, 0)} />
  <img src="https://img2.jpg" alt="img-2" onClick={this.photoGallery.bind(this, 1)} />
  <img src="https://img3.jpg" alt="img-3" onClick={this.photoGallery.bind(this, 2)} />
</div>

Answer 2

我想要将事件监听器保留在父级上，您可以从图像的alt属性中对索引进行条带化。

 var alt = event.target.alt,
   index = alt.replace('img-', '');

另外，你可以使用@Igor Alemasow的建议，并使用data-index HTML5属性来获取js中的索引。

Answer 3

最简单的方法是将click事件绑定到每个img并传入索引：

photoGallery(index, event) {
  console.log(event.target);
  this.setState({ imgSrc: event.target.src });
}

<div className="photo-container">
  <img src="https://img1.jpg" alt="img-1" onClick={this.photoGallery.bind(this, 0)} />
  <img src="https://img2.jpg" alt="img-2" onClick={this.photoGallery.bind(this, 1)} />
  <img src="https://img3.jpg" alt="img-3" onClick={this.photoGallery.bind(this, 2)} />
</div>

Answer 4

为什么不将onClick处理程序附加到img元素而不是它的父元素？

photoGallery(event) {
  console.log(event.target);
  this.setState({ imgSrc: event.target.src });
}

<div className="photo-container">
  <img src="https://img1.jpg" alt="img-1" onClick={e=> this.photoGallery(e)} />
  <img src="https://img2.jpg" alt="img-2" onClick={e=> this.photoGallery(e)} />
  <img src="https://img3.jpg" alt="img-3" onClick={e=> this.photoGallery(e)} />
</div>

Answer 5

创建Image组件并在image上添加onClick事件处理程序：

const Image = ({path, alt, index, onClick}) =>
    <img
        src={path}
        alt={alt}
        onClick={e => onClick(e, index)}
    />;

并在渲染函数中使用它：

const imagesList = [
    {
        path: 'https://img1.jpg',
        alt: 'img-1'
    },
    {
        path: 'https://img2.jpg',
        alt: 'img-2'
    },
    {
        path: 'https://img3.jpg',
        alt: 'img-3'
    }
];

const images = imagesList.map((image, i) => {
    return <Image
        {...image}
        onClick={this.photoGallery}
        key={i}
    />
});

return <div className="photo-container">
    {images}
</div>;

Answer 6

您可以考虑的一件事是将图像信息保存为图像对象数组。您可以添加索引值，并在组件中构建映像时访问它。以下是使用代码的简化示例：

class PhotoGallery extends React.Component {

  constructor(props) {
    super(props);
    this.state = { imgSrc: '' };
    this.photoGallery = this.photoGallery.bind(this);
  }

  photoGallery(event) {
    console.log(event.target.dataset.index);
    this.setState({ imgSrc: event.target.src });
  }

  buildImages(images) {
    return images.map(({ index, src, alt}) => {
      return <img key={index} data-index={index} src={src} alt={alt} />;
    });
  }

  render() {
    const { images } = this.props;
    return (
      <div className="photo-container" onClick={this.photoGallery}>
      {this.buildImages(images)}
      </div>
    )
  }

}

const images = [
  { src: 'https://img1.jpg', alt: 'img-1', index: 1 },
  { src: 'https://img2.jpg', alt: 'img-2', index: 2 },
  // { src: 'https://img3.jpg', alt: 'img-3', index: 3 },
  // { src: 'https://img4.jpg', alt: 'img-4', index: 4 },
  { src: 'https://img5.jpg', alt: 'img-5', index: 5 }
];

ReactDOM.render(
  <PhotoGallery images={images} />,
  document.getElementById('container')
);

img {
  margin: 1em 1em 0 0;
  border: 1px solid #dfdfdf;
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

获取事件目标的子元素的索引

6 个答案: