反应：如何从点击处理程序设置焦点答案

【问题标题】：react: how to set focus from a click handler反应：如何从点击处理程序设置焦点
【发布时间】：2016-08-03 04:19:29
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html reactjs redux

【解决方案1】：

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

在 dispatch action 后立即触发 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();
}

【讨论】：

我最初的动机是将视图类限制为纯粹的、愚蠢的渲染代码，没有行为/状态更改代码，并且能够独立于渲染测试所有状态逻辑。与默认焦点处理（不通过我的应用程序状态）的区别在于它现在由我的代码显式操作。但是你可能是对的，更实用的方法最适合这个特定问题，将所有焦点控制转移到应用程序代码是不现实或不可取的。

【解决方案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>

【讨论】：