Как установить модальную прокрутку вверх, когда она появляется в React.js - PullRequest
Новая
       12

Как установить модальную прокрутку вверх, когда она появляется в React.js

0 голосов
/ 07 сентября 2018

Я сделал модальные окна, используя react-bootstrap-sweetalert lib. Содержит длинный список содержимого, поэтому я разрешил overflow:scroll. В чем проблема, когда модальный открыт, он не прокручивается вверх. И прокрутите в неизвестную позицию, поэтому мне нужно прокрутить вверх вручную.

Это простой код 

basicAlert = () => {
   this.setState({
        alert: (
          <div>
           // long list table
          </div>)
   });
}
hideAlert = () => {
   this.setState({
      alert: null
   });
}
render() {
   return (
     {this.state.alert}
     // rest contents ...
   )
}

Любой совет мне очень поможет. Спасибо

1 Ответ

0 голосов
/ 07 сентября 2018

Вы можете создать ref для элемента в вашем компоненте, который обертывает прокручиваемый контент, а затем использовать эту ссылку для установки scrollTop в 0 соответствующего элемента DOM, когда контент отображается в вашем модале.

Так, например, следующие дополнения / корректировки вашего компонента должны достичь того, что вам нужно: 

// Add a constructor to create the ref
constructor(props) {
  super(props)
  // Add a component ref to your component. You'll use this to set scroll 
  // position of div wrapping content
  this.componentRef = React.createRef();

}

basicAlert = () => {
  this.setState({
    alert: (
      <div>
      // long list table
      </div>)
     }, () => {

      // After state has been updated, set scroll position of wrapped div
      // to scroll to top
      this.componentRef.current.scrollTop = 0;
    });
}

render() {

  // Register your ref with wrapper div
  return (<div ref={ this.componentRef }>
    { this.state.alert }
    // rest contents ...
    </div>)
}
...