Javascript 如何通过onClick事件将元素放置在css flex box创建的水平列表中，使其与ClientWidth居中对齐？

我使用css flex box创建了一个水平列表

<div onClick={() => setActive("item-1")}} className="item"><h2>Item-1</h2></div>
.
.
.
<div onClick={() => setActive("item-6")}} className="item"><h2>Item-1</h2></div>
</div>

因此，当单个项目处于活动状态时，我想使用onClick将其滚动到clientWidth（屏幕）的中间，当有人单击另一个项目时，该项目将处于活动状态，并将从初始位置滚动到屏幕的中间。

---

怎么做

可以使用useRef（）钩子设置引用数组，然后在单击特定引用时，可以使用“getBoundingClientRect（）”和window.scrollTo滚动到特定位置。有关getBoundingClientRect（）和window.scrollTo的详细信息，请查看文档： 1. 2.

然而，在我开始解释解决方案之前，我看到您已经为水平列表创建了许多

。更好的解决方案是使用javascript中的.map（）函数调用数组以返回div，而不是手动执行此操作，因为这非常耗时，并且不允许向列表中动态添加更多项。现在来看解决方案：

import React, { useRef } from "react";

const Component = () => {
 var listRef = useRef([]);

const scrollToRef = (rect) => window.scrollTo((rect.right-rect.left)/2, (rect.top-rect.bottom)/2)

// setActiveItem() handles both the name of current Item as well as scroll position
const setActiveItem = (i) =>{
 var itemName = "item-"+i.toString();
 setActive(itemName);
 var rect = listRef.current[i].getBoundingClientRect();
 scrollToRef(rect);
};

const getAllLists = arr.map((listItem, i)=>(
  <div ref={(el) => (listRef.current[i] = el)} onClick={() => setActiveItem(i)}}
className="item"><h2>Item - {i}</h2></div>         
));

return (<div className="list">
  {getAllLists}
</div>);
};

import React，{useRef}来自“React”；
常量组件=（）=>{
var listRef=useRef（[]）；
常量scrollToRef=（rect）=>window.scrollTo（（rect.right rect.left）/2，（rect.top rect.bottom）/2）
//setActiveItem（）处理当前项目的名称和滚动位置
常量setActiveItem=（i）=>{
var itemName=“item-”+i.toString（）；
setActive（itemName）；
var rect=listRef.current[i].getBoundingClientRect（）；
scrollToRef（rect）；
};
const GetAllList=arr.map（（listItem，i）=>(
（listRef.current[i]=el）}onClick={（）=>setActiveItem（i）}
className=“item”>项-{i}
));
返回(
{GetAllList}
);
};

你能检查一下这个沙箱并告诉我我做错了什么吗？最后用“scrollBy”找到了答案。“getBoundingClientRect”非常有效。更新了沙盒中的代码。

import React, { useRef } from "react";

const Component = () => {
 var listRef = useRef([]);

const scrollToRef = (rect) => window.scrollTo((rect.right-rect.left)/2, (rect.top-rect.bottom)/2)

// setActiveItem() handles both the name of current Item as well as scroll position
const setActiveItem = (i) =>{
 var itemName = "item-"+i.toString();
 setActive(itemName);
 var rect = listRef.current[i].getBoundingClientRect();
 scrollToRef(rect);
};

const getAllLists = arr.map((listItem, i)=>(
  <div ref={(el) => (listRef.current[i] = el)} onClick={() => setActiveItem(i)}}
className="item"><h2>Item - {i}</h2></div>         
));

return (<div className="list">
  {getAllLists}
</div>);
};