Reactjs 点击不同的元素后保持焦点位置
我有一个两列的表格。右列有输入字段。当一个输入字段被聚焦时（如下图所示），它会在表格的右侧显示一个Reactjs 点击不同的元素后保持焦点位置,reactjs,Reactjs,我有一个两列的表格。右列有输入字段。当一个输入字段被聚焦时（如下图所示），它会在表格的右侧显示一个不可聚焦按钮。当用户单击此按钮时，应使用文本修改聚焦的输入字段，但反向修改。此按钮是不可选项卡的 我的问题是，当用户单击按钮反转文本时，会使其在表中的当前位置失去焦点。也就是说，当他在点击按钮后再次点击tab时，焦点会回到页面顶部，而不是从刚刚反转的输入框继续 即使在用户单击其他不可制表的元素时，如何保持制表符的位置 您最好的策略是跟踪全局状态变量中当前关注的元素。当每个元素都被聚焦时，无论是通过单
不可聚焦按钮您最好的策略是跟踪全局状态变量中当前关注的元素。当每个元素都被聚焦时，无论是通过单击它还是在它上进行标记，都必须检测焦点的变化并更新跟踪该变化的状态变量。这意味着每个可制表的表单元格都需要一个更新状态变量的onFocus的eventListener。然后，您可以将事件侦听器附加到按钮，该按钮将焦点转移到相邻单元格。因此，如果您的表如下所示：
来源
注
攀登
我真的很喜欢这项运动
跑步
我不喜欢
骑自行车
我需要一辆自行车
吃
谁不是歌迷
切换焦点
//全局状态变量
让我们现在集中注意力；
const tds=document.querySelectorAll（'td'））
//将onFocus事件附加到所有选项卡框
tds.forEach（td=>{
td.addEventListener（'focus'，（）=>{
currentlyFocusedElement=td
console.log（currentlyFocusedElement）
})
})
const toggleButton=document.querySelector（“#toggleButton”）
//使用按钮以编程方式更改焦点
//我这里的if语句有点草率，但它们可以解决您的问题，可以很容易地进行调整
toggleButton.addEventListener（'单击'，（）=>{
常量编号=currentlyFocusedElement.id
控制台日志（编号）
如果（编号%2==0）{
document.getElementById（`${number-1}`）.focus（）
}else if（数字%2==1）{
document.getElementById（Number（Number）+1.focus（）
}
})
reactjs