我有以下功能来处理组件中的新道具:
componentWillReceiveProps(newProps) {
this.setState({
songTitles: newProps.songTitles,
queue: newProps.songQueue
});
}
以及以下渲染功能:
render() {
return(
<div id="attendee-queue" ref='attendeequeue'>
<div id="attendee-queue-list">
{ this.state.songTitles.map((title, i) => {
return <div key={i}>
<div className={this.getDivClass(i) + " attendee-songOuterDiv songPlaying hvr-back-pulse2"}>
<a target="_blank" href={"https://www.youtube.com/watch?v="+this.state.queue[i]}>
<div className="attendee-songInnerDiv"
onMouseEnter={() => this.handleHoverQueue.bind(i)}
onMouseLeave={this.handleUnhoverQueue}>
{(this.state.hoverQueueId == i) ?
{title}
:
<p>{title}</p>
}
</div>
</a>
</div>
</div>
})
}
</div>
</div>
);
}
但每次组件的道具发生变化时,浏览器会自动滚动到顶部。我希望防止这种情况发生,让用户保持与原来相同的滚动位置。
我查看了this帖子,但我不认为我有一个可以使用preventDefault的事件。
作为参考,这些是我的其他一些功能:
constructor(props) {
super(props);
this.state = {
songTitles: props.songTitles,
hoverQueueId: -1,
queue: props.songQueue
};
this.scroll = Scroll.animateScroll;
this.handleHoverQueue = this.handleHoverQueue.bind(this);
this.handleUnhoverQueue = this.handleUnhoverQueue.bind(this);
}
handleHoverQueue() {
this.setState({hoverQueueId:i});
}
handleUnhoverQueue(){
this.setState({hoverQueueId: -1});
}
getDivClass(i){
return "divNotHovered";
}
这些是我的进口商品:
import React from 'react';
import ReactDOM from 'react-dom';
import {
Image
} from 'reactstrap';
import {
formatDateTime
} from '../timeConverter.js';
import Scroll from 'react-scroll';
var url = 'https://djque.herokuapp.com/?query=';
require("../resources/css/eventList.css");