javascript 在textBox中输入值后如何聚焦到网格中的特定单元格

omqzjyyz  于 2023-03-16  发布在  Java
关注(0)|答案(1)|浏览(110)

在文本框中输入单元格编号后,我想移动到网格中的特定单元格。当我在文本框中输入任何数字时,它应该自动聚焦并滚动到网格中的该单元格。
示例-在textBox中键入601,它应该自动向下滚动到该单元格
我已在https://codesandbox.io/s/misty-shadow-o9s8w4?file=/demo.tsx下面附加了沙盒代码

nhaq1z21

nhaq1z211#

用这个替换if块,只需要多一行就可以了!

if (e.target.value) {
  gridItems[e.target.value - 1].style.backgroundColor = "orange";
  gridItems[e.target.value - 1].scrollIntoView({ behavior: "smooth" });
}

编辑CodeSandbox Link

作为额外的一件事,我要说的是,这是一个有点低效:

for (let i = 0; i < 1023; i++) {
  const element = gridItems[i];
  element.style.backgroundColor = "white";
}

考虑在useState钩子中设置文本框的值,并将其作为prop传递到Item组件中,然后比较Item的索引,然后决定是否将其着色为橙子。

相关问题