Question

我的react-redux表单有一个按钮，可以重置表单和将焦点移回第一个输入字段。
重置内容是直接的redux状态，但我在焦点上遇到了麻烦。

第一个字段上的autoFocus仅适用于初始渲染。是否有任何理智的方式重新触发它？

如果我需要使用显式的element.focus（），我应该从哪里调用它？我正在使用react-redux，但不是redux-forms。

Answer 1

您是否在商店中保留了一些信息，以了解哪些元素应该关注页面加载？不？那你为什么要这么做呢？

在调度操作后立即触发element.focus() - 您不需要Redux来实现此目的，Redux也不需要存储此状态。

伪代码可能看起来像这样

onReset() {
  const action = {
    type: RESET_FORM,
  }
  dispatch(action);

  const element = getElement(); // propably read ref? Find element with [autoFocus] attribute in component?
  element.focus();
}

Answer 2

你可以使用：

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>

react：如何从点击处理程序设置焦点

2 个答案: