Question

我有一个日历组件，里面有一个小时选择器，它具有 scroll-y：auto 。每次用户单击小时按钮时，信息都会转到Redux，因此该组件将重新呈现。我唯一的问题是滚动条移动到顶部，并且我希望滚动条位于用户选择时间的同一位置。我试图将滚动位置保存在LocalStorage中，但是我不知道如何在重新渲染后设置滚动位置。


saveTimeInStorage = () => {
   let el = document.querySelector('.list-group');
   localStorage.setItem('scroll', el.scrollTop);
}

chooseTime = (time) => {
   this.saveTimeInStorage();
   this.props.setTime(time);
  }

render() {

return (
<div className="wrapper">
   <div className="calendar">
      <div className="calendar__picture"></div>
      <div className="calendar-header">
         <h3>  Выберите дату и время</h3>
      </div>
      <div className="day-time">
      <DatePicker
        selected={this.props.date}
        locale="ru"
        onChange={(day) => {this.props.setDate(day)}}
        inline />

         <div className="time">
            <div className="list-group hour">
               {this.hours.map(time => (
               <ListGroup.Item
                  id={time}
                  as="li"
                  active={time===this.props.time}
                  onClick={() => this.chooseTime(time)}
                  style={{ textAlign: "right", cursor: "pointer" }} >
                  {time + ":00"}
               </ListGroup.Item>
               ))}
            </div>
         </div>
      </div>

在React / Redux中重新渲染后保持Scroll-y

0 个答案: