当我点击"照片容器"中的图像时我得到了元素。
如何获取该元素的索引?
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>
答案 0 :(得分:2)
这是解决方案
解决方案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>
答案 1 :(得分:1)
我想要将事件监听器保留在父级上,您可以从图像的alt属性中对索引进行条带化。
var alt = event.target.alt,
index = alt.replace('img-', '');
另外,你可以使用@Igor Alemasow的建议,并使用data-index
HTML5属性来获取js中的索引。
答案 2 :(得分:0)
最简单的方法是将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>
答案 3 :(得分:0)
为什么不将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>
答案 4 :(得分:0)
创建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>;
答案 5 :(得分:0)
您可以考虑的一件事是将图像信息保存为图像对象数组。您可以添加索引值,并在组件中构建映像时访问它。以下是使用代码的简化示例:
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>