react:如何通过点击处理程序设置焦点

react: how to set focus from a click handler

本文关键字：处理 程序 设置 焦点 何通过 react      更新时间：2024-05-23

我的基于react redux的表单有一个按钮，它应该重置表单并将焦点移回第一个输入字段
重置内容是直接的冗余状态，但我在焦点方面遇到了问题。

第一个字段上的autoFocus仅适用于初始渲染。有什么合理的方法可以重新触发它吗？

如果我需要使用显式元素.focus（），我应该从哪里调用它？我使用的是react redux，但不是redux形式。

您是否在存储中保留一些信息以了解哪些元素应该关注页面加载？没有？那你以后为什么要这么做呢？

在调度操作之后立即触发element.focus()-您不需要Redux来实现这一点，也不需要Redu克斯来存储此状态。

伪代码可能看起来像这个

onReset() {
  const action = {
    type: RESET_FORM,
  }
  dispatch(action);
  const element = getElement(); // propably read ref? Find element with [autoFocus] attribute in component?
  element.focus();
}

您可以使用：

document.getElementById("ElementName").focus();

此处的最终代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function change() {
    document.getElementById("two").focus();
}
</script>
</head>
<body>
    <input type="radio" name="name" id="name" onchange="change()" /> 
    <input type="text" name="one" id="one" /> 
    <input type="text" name="two" id="two" /> 
</body>
</html>

相关文章：