0
我试图设置它,以便在从一个数组映射的映像滚动时,状态会更新为该映像的坐标,从而更新Google Map。React映射数组中的OnScroll事件侦听器
<CloudinaryContext cloudName="hcjmhcjf" fetchFormat="auto">
<div className="image-holder">
{displayImages.map((displayImage, i) => {
return (
<div
className="responsive"
key={i}
ref="img"
onScroll={this.handleScroll(this.state.images[i].location)}>
<div className="img">
<a
target="_blank"
href={`http://res.cloudinary.com/gdbdtb/image/upload/${displayImage}.jpg`}>
<Image publicId={displayImage} responsive style={{width: '100%'}}>
<Transformation crop="scale" width="auto" responsive_placeholder="blank" />
</Image>
</a>
</div>
</div>
);
})}
</div>
</CloudinaryContext>
从通过一些其他的问题,阅读我设置以下生命周期方法了:
componentDidMount() {
const imgDiv = ReactDOM.findDOMNode(this.refs.img)
imgDiv.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
const imgDiv = ReactDOM.findDOMNode(this.refs.img)
imgDiv.removeEventListener('scroll', this.handleScroll);
}
然而,ReactDOM.findDOMNode(this.refs.img)
总是返回undefined
会是怎样一种方式,我可以打电话给
handleScroll(location) {
this.setState({
center: location
})
}
并且在规范中有地图更新图像是否滚动?
你能澄清你的要求吗?我不明白以下内容:“当从一个数组映射的图像滚动时,状态会更新为该图像的坐标” –
@MatthewBarbara,所以我有一个图像阵列毗邻谷歌地图。在第一次渲染时,谷歌地图以第一张图片的坐标为中心。我想要的是当图像滚动时,谷歌地图将重新居中滚动的图像 –
你可以把你的问题放在codepen或jsfiddle上吗?这将更容易理解这个问题 –