2

现在每当我的模态关闭时,它会一直向左滚动并且不会返回到调用它的原始 div。我尝试了每个 api 回调和每个反应生命周期方法,但没有任何效果。但是,如果我在终端中使用 scrollIntoView ,它工作得很好。

复制步骤: 1. 转到http://www.arabisraeliconflictmadesimple.com/timeline 2. 按选项,联合国 3. 向右滚动到 1967 4. 按“联合国安全决议 242” 5. 注意我们回到了 1947

这是我调用模态的组件```

import React, {Component} from 'react'
import $ from 'jquery'
import Modal from 'react-responsive-modal'

class InfoSquare extends Component {
    constructor(props) {
        super(props)
        this.state = {
            open: false,
          };
    }

    onOpenModal() {
        if (this.props.modal_info)
            this.setState({ open: true });
    }

    scrollBack() {
        let to_return = document.getElementById(`${this.props.year}`)
        to_return.scrollIntoView();
    }

    onCloseModal() {
        this.setState({ open: false });
    }

    render(props) {
        const { open } = this.state;
        return (
            <div>
                <p className={`${this.props.indicator}-text`} onClick={this.onOpenModal.bind(this)} >{this.props.text}</p>              
                <Modal open={open} onClose={this.onCloseModal.bind(this)} onAfterOpen={this.scrollBack} little>
                    <h4>{this.props.text}</h4>
                    {this.props.modal_info && 
                        this.props.modal_info.map(info => <p key={info}>{info}</p>)
                    }
                </Modal>
            </div>
        );
    }
}

export default InfoSquare;

```
4

0 回答 0