javascript - 如何使用 React 滚动到 div onClick?
问题描述
我在使用 React 构建的这个应用程序中有一个粘性导航。我想弄清楚的是如何使用 div 滚动到该 div onClick
?我正在使用该window.scrollTo
方法。
页面上的 div 具有与锚标签对应的 ID。
handleClick = e => {
this.setState({
activeSection: e.target.id,
});
let sections = document.querySelectorAll('.deal-details__container');
window.scrollTo({
top: 690,
behavior: 'smooth',
});
};
我的标记如下所示:
<h6 className="section-header-overview text-center mb-0">
<a href="#overview" className={ this.state.activeSection === true ? 'active' : ''} onClick={() => this.handleClick('overview')}>
Overview
</a>
这是我需要滚动到的组件之一:
import React from 'react';
import { dealType } from '../../../../core/types';
import SpecsGroup from './SpecsGroup';
import SpecsTabButton from './SpecsTabButton';
import { Row, Col, Container } from 'reactstrap';
import { groupBy, filter, map, toPairs, pipe, prop, zipObj } from 'ramda';
export default class Specs extends React.PureComponent {
scrollRef = React.createRef();
static propTypes = {
deal: dealType.isRequired,
};
state = {
activeTab: 'capabilities',
activeCategory: null,
};
filterSpecs() {
const groupByCategories = pipe(
filter(item => {
if (
this.state.activeTab === 'capabilities' &&
capabilitiesCategories.includes(item.category)
) {
return true;
}
if (
this.state.activeTab === 'features' &&
featuresCategories.includes(item.category)
) {
return true;
}
return false;
}),
groupBy(prop('category')),
toPairs,
map(zipObj(['category', 'values']))
);
return groupByCategories(this.props.deal.equipment);
}
toggleActiveTab(tab) {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab,
activeCategory: null,
});
}
}
toggleActiveCategory(category) {
if (this.state.activeCategory !== category) {
this.setState({
activeCategory: category,
});
} else {
this.setState({
activeCategory: null,
});
}
}
render() {
if (
!this.props.deal.equipment ||
this.props.deal.equipment.length === 0
) {
return false;
}
return (
<div className="deal-details__container pt-5 pb-5" id="specs" ref={this.scrollRef}>
<Container>
<Row className="deal__section-heading" noGutters>
<Col>
<h3 className="text-center"> Specifications </h3>
</Col>
</Row>
<Row className="rounded bg-white shadow-sm" noGutters>
<Col>
<Row className="deal-details__specs-tabs" noGutters>
<SpecsTabButton
isActive={
this.state.activeTab === 'capabilities'
}
label="Capabilities"
value="capabilities"
handleOnClick={this.toggleActiveTab.bind(
this
)}
/>
<SpecsTabButton
isActive={
this.state.activeTab === 'features'
}
label="Features"
value="features"
handleOnClick={this.toggleActiveTab.bind(
this
)}
/>
</Row>
<SpecsGroup
deal={this.props.deal}
category={this.state.activeTab}
activeCategory={this.state.activeCategory}
specs={this.filterSpecs()}
toggleActiveCategory={this.toggleActiveCategory.bind(
this
)}
/>
</Col>
</Row>
</Container>
</div>
);
}
}
我仍在学习反应和一般的 JS。所以我可能做错了。我读过关于 refs 的文章,但不确定这些是否会更好/更差。
任何和所有的帮助表示赞赏!
解决方案
你可以使用 React 的 ref 系统,它可以让你访问DOM elements and manipulation.
因此,在您的代码中,您可以执行以下操作:
class myComponent extends React.Component{
constructor(props){
super(props)
this.state = {
field: value
}
//creates a reference for your element to use
this.myDivToFocus = React.createRef()
}
handleOnClick = (event) => {
//.current is verification that your element has rendered
if(this.myDivToFocus.current){
this.myDivToFocus.current.scrollIntoView({
behavior: "smooth",
block: "nearest"
})
}
}
render(){
return(
<button onClick={this.handleOnClick}>Click me</button>
<div ref={this.myDivToFocus}>
Welcome to my section
</div>
)
}
}
推荐阅读
- asp.net-core - 如何在 AsEnumerable 选择中给出 if else if 语句
- express - 如何使用 express.js 从 API 获取数据
- python - 部署时 Heroku 中的 FileNotFoundError (Django)
- python-3.x - 扩展列表
- javascript - 有没有办法在我的 Chrome 扩展程序获得批准之前将其发送给测试人员?
- java - Wildfly 20 中未关闭数据源池连接
- angular - 以函数为输入的 RxJs 自定义运算符
- c# - 使用数组调用验证方法,并带有明确的失败消息
- spring - NullPointerException 单元测试控制器弹簧
- javascript - React:在不同组件中提取相同逻辑的好模式是什么?