反应：如何从点击处理程序设置焦点
Posted
技术标签:
【中文标题】反应：如何从点击处理程序设置焦点【英文标题】：react: how to set focus from a click handler 【发布时间】：2016-08-03 04:19:29 【问题描述】：我的基于 react-redux 的表单有一个按钮，可以重置表单并将焦点移回第一个输入字段。 重置内容是直接的 redux 状态，但我在焦点上遇到了问题。
第一个字段上的自动对焦仅适用于初始渲染。有什么理智的方法可以重新触发它吗？
如果我需要使用显式 element.focus()，我应该从哪里调用它？我使用的是 react-redux，但不是 redux-forms。
【问题讨论】：
【参考方案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>【讨论】：
以上是关于反应：如何从点击处理程序设置焦点的主要内容，如果未能解决你的问题，请参考以下文章
在Virtualbox建立的CentOS虚拟机中一些界面鼠标点击没反应是怎么回事？
如何在不点击通知的情况下从通知中获取数据（firebase 云消息传递和本机反应）