一、问题
博主在写代码的时候,遇到一个需求,要求实现一个点击事件,达到类似于html锚点效果的定位功能,将页面定位到对应的选择的地方,但reacr不能使用a链接去进行锚点的点击,因为a链接会触发路由跳转,因此博主搜罗八方,找到一个方法。
二、解决方法
DOM对象.scrollIntoView({block:“”,behavior:"",inline:""})
-
block设定垂直方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "start"。
-
behavior设定动画过渡效果, "auto"或 "smooth" 之一。默认为 "auto"。
-
inline设定水平方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
三、代码
class Maodian extends Component {
state = {
applist: ["app1", "app2", "app3"]
}
hander = (value)=>{
if(value){
// 获取dom节点
let anchorElement = document.getElementById(value)
// 通过scrollIntoView方法
// block设定垂直方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "start"。
// behavior设定动画过渡效果, "auto"或 "smooth" 之一。默认为 "auto"。
// inline设定水平方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
if(anchorElement) {anchorElement.scrollIntoView({block:"start",behavior:"smooth"})}
}
}
render() {
return (
<>
<div className="nav">
{
this.state.applist.map((item, index) => {
return <div
key={index}
className="box"
// 创建点击事件 传入对应的iterm
onClick= {() => this.hander(item)}
>
{item}
</div>
}
)
}
{
this.state.applist.map((item, index) =>{
return <div
className='box2'
key={index}
// 循环生成三个大盒子生成对应item的 ID
id={item}
>
<h1>{item}</h1>
</div>
})
}
</div>
</>
);
}
}
关键函数:
hander = (value)=>{
if(value){
// 获取dom节点
let anchorElement = document.getElementById(value)
// 通过scrollIntoView方法
// block设定垂直方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "start"。
// behavior设定动画过渡效果, "auto"或 "smooth" 之一。默认为 "auto"。
// inline设定水平方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
if(anchorElement) {anchorElement.scrollIntoView({block:"start",behavior:"smooth"})}
}
}
需要注意的是,定位盒子的id要与你传入的值相对应,并能够通过document.getElementById(传入的值)拿到相对应的DOM节点,才能实现类似锚点的定位移动功能。
2022年7月25日补 ————————————————————————————————
博主是甜蜜的烧饼,andt官网就有这个插件