我在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>
通常，这意味着您正在跟踪一个包含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>
