使用onKeyDown (React)使表滚动选定的表行

Question

我有一些主要的困难，试图使我的表滚动时，通过表中包含onKeyDown的行。似乎正在发生的是，event实际上并没有改变时，使用键盘，即使selected是突出选定的行正确。如果单击表格中间的表格行，则仅在第一次按键盘向上或向下时滚动表格。(这是有道理的，因为这是一个新的事件)。

我已经尝试在useCallback中包装函数handleKeyDown，以防它在渲染之间丢失引用，但没关系。

有没有人有任何建议，我如何才能得到一个新的事件在按键?

我把主要函数留在这里看一看，但是你可以找到一个工作这里有问题的沙盒:https://codesandbox.io/s/basictable-demo-material-ui-forked-54frpm?file=/demo.tsx

const handleKeyDown = (event) => {
event.preventDefault();
console.log(event.target);
scrollIntoView(event.target);
if (event.key === "ArrowUp") {
if (selected === rows[0].id) return;
setSelected(getNextRow(rows, selected, "up"));
}
if (event.key === "ArrowDown") {
if (selected === rows[rows.length - 1].id) return;
setSelected(getNextRow(rows, selected, "down"));
}
};

<TableRow
key={row.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
selected={isRowSelected(row.id)}
onClick={() => handleSetSelected(row.id)}
onKeyDown={handleKeyDown}
tabIndex={0}

const isRowSelected = (rowId) => {
return rowId === selected;
};
const scrollIntoView = (element) => {
if (element) {
element.scrollIntoView({ behavior: "smooth", block: "center" });
}
};

const getNextRow = (rows, selected, direction) => {
const index = rows.findIndex((row) => row.id === selected);
if (direction === "up") return rows[index - 1].id;
if (direction === "down") return rows[index + 1].id;
}

事件被记录到控制台。如果您单击第一行，按键盘上的向下箭头2-3次，您可以检查记录的元素，并确认它们都来自实际单击的行，而不是用键盘选择的行。

事先感谢您的帮助。

Stephan Bakkelund Valois

Answer 1

我找到了一个不依赖于keyDown事件本身的工作解决方案。

由于我们已经使用函数getNextRow计算了下一行，该函数返回下一行的id，我们可以利用它来使它滚动。

首先，我们需要在表行组件中添加id:

<TableRow
....
id={row.id}
> 

我们可以发送从getNextRow得到的id到scrollIntoView函数，并使用querySelector获取html元素，然后滚动到正确的行:

const scrollIntoView = (id: string) => {
const el = document.querySelector(`#${id}`)
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })
}