启用禁用输入后，React自动对焦输入-英雄云拓展知识分享

匿名投稿 275 2024-01-22

我正在尝试自动对焦文本输入（选择相干的无线电选项后，启用了输入）。

当在选项之间切换将启用文本输入时，自动对焦是可行的。但是，当从将文本输入禁用到可以启用文本输入的选项的选项上切换时，自动对焦会失败。

在下面的示例链接中：
- 选项1，选项2：禁用文本输入
- 选项3，选项4：启用文本输入

故障案例：
- 选项1是默许
- 选择选项3或选项4
- 输入启用
- 自动对焦失败（寻觅解决此行动的指针）

成功案例：
- 选择选项3
- 输入已启用
- 切换到选项4
- 输入是自动引发的

在CODESANDBOX上解决问题的示例代码

看答案

这是不起作用的，由于您在setState调用后立行将其设置，但是在生命周期的这一点上，组件还没有重新渲染，并且对输入的REF仍处于禁用的状态。

您需要做的是，在组件确切在componentDidupdate钩中进行更新后，触发焦点处理。

这样的东西（伪代码）

componentDidUpdate(prevProps, prevState) {if (this.state.enabled) {
this.inputValue.focus();
}
}

您可能需要其他检查，例如仅关心从禁用到启用的过渡。这可以经过做这样的事情来实现：

componentDidUpdate(prevProps, prevState) {if (!prevState.enabled && this.state.enabled) {
this.inputValue.focus();
}}

这里有一个更新的代码框的链接： HTTPs://codesandbox.io/s/31rnlkjw4

🚀🌟 点击注册免费试用超级应用平台-英雄云企业级hpapaas 🌟🚀 😃👉🌐

免责声明：

本网址（www.yingxiongyun.com）发布的材料主要源于独立创作和网友匿名投稿。此处提供的所有信息仅供参考之用。我们致力于提供准确且可信的信息，但不对材料的完整性或真实性作出任何保证。用户应自行验证相关信息的正确性，并对其决策承担全部责任。对于由于信息的错误、不准确或遗漏所造成的任何损失，本网址不承担任何法律责任。本网站所展示的所有内容，如文字、图像、标志、音频、视频、软件和程序等的版权均属于原创作者。如果任何组织或个人认为网站内容可能侵犯其知识产权，或包含不准确之处，请即刻联系我们进行相应处理。