为什么这个 React 手风琴会在元素展开时向上滚动页面？

Question

我在 React 中有这个手风琴菜单，我不是自己写的，但我试图理解为什么每次展开一个元素时它都会将页面滚动到顶部以及我可以做些什么来防止这种情况发生。

当一个元素展开时，我希望页面保持在原来的位置，现在如果我在点击展开的那一刻向下滚动，它会直接跳到顶部。

   state = {
        isBasic: false,
        isMultiTarget: [],
        accordionKey: 1
    };

    render() {
        const { accordionKey } = this.state;

    return (
            <Aux>
                <Row>
                <Col sm={12} className="accordion">
                        <h5>Accordion Example</h5>
                        <hr/>
                        <Card className="mt-2">
                            <Card.Header>
                                <Card.Title as="h5">
                                    <a href={DEMO.BLANK_LINK}
                                       onClick={() => this.setState({ accordionKey: 
                                     (accordionKey !== 1) ? 1 : 0 })}
                                       aria-controls="accordion1"
                                       aria-expanded={accordionKey=== 1}>
                                        Collapsible Group Item #1
                                    </a>
                                </Card.Title>
                            </Card.Header>
                            <Collapse in={this.state.accordionKey === 1}>
                                <div id="accordion1">
                                    <Card.Body>
                                        <Card.Text>
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
                                            aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
                                            sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
                                            craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
                                            occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                                            labore sustainable VHS.
                                        </Card.Text>
                                    </Card.Body>
                                </div>
                            </Collapse>
                        </Card>
                        <Card className="mt-2">
                            <Card.Header>
                                <Card.Title as="h5">
                                    <a href={DEMO.BLANK_LINK}
                                       onClick={() => this.setState({ accordionKey: (accordionKey !== 2) ? 2 : 0 })}
                                       aria-controls="accordion2"
                                       aria-expanded={accordionKey === 2}>
                                        Collapsible Group Item #2
                                    </a>
                                </Card.Title>
                            </Card.Header>
                            <Collapse in={this.state.accordionKey === 2}>
                                <div id="accordion2">
                                    <Card.Body>
                                        <Card.Text>
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
                                            aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
                                            sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
                                            craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
                                            occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                                            labore sustainable VHS.
                                        </Card.Text>
                                    </Card.Body>
                                </div>
                            </Collapse>
                        </Card>
                        <Card className="mt-2">
                            <Card.Header>
                                <Card.Title as="h5">
                                    <a href={DEMO.BLANK_LINK}
                                       onClick={() => this.setState({ accordionKey: (accordionKey !== 3) ? 3 : 0 })}
                                       aria-controls="accordion3"
                                       aria-expanded={accordionKey === 3}>
                                        Collapsible Group Item #3
                                    </a>
                                </Card.Title>
                            </Card.Header>
                            <Collapse in={this.state.accordionKey === 3}>
                                <div id="accordion3">
                                    <Card.Body>
                                        <Card.Text>
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
                                            aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
                                            sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
                                            craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
                                            occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                                            labore sustainable VHS.
                                        </Card.Text>
                                    </Card.Body>
                                </div>
                            </Collapse>
                        </Card>
                    </Col>
                </Row>
            </Aux>

Answer 1

通常这意味着您正在关注一个带有href="#" 的链接，它告诉浏览器滚动到页面顶部。

在你的卡片标题中，我看到：

 <a href={DEMO.BLANK_LINK}
   onClick={() => this.setState({ accordionKey: (accordionKey !== 2) ? 2 : 0 })}
   aria-controls="accordion2"
   aria-expanded={accordionKey === 2}>
    Collapsible Group Item #2
</a>

如果DEMO.BLANK_LINK 是"#"，那就可以解释了。单击该链接时，您需要取消该链接的默认操作；查看onClick的更改：

 <a href={DEMO.BLANK_LINK}
   onClick={(e) => { e.preventDefault(); this.setState({ accordionKey: (accordionKey !== 2) ? 2 : 0 }); }}
   aria-controls="accordion2"
   aria-expanded={accordionKey === 2}>
    Collapsible Group Item #2
</a>