用boostrap反应弹出式未显示-英雄云拓展知识分享
428
2024-01-22
启用禁用输入后，React自动对焦输入-英雄云拓展知识分享
我正在尝试自动对焦文本输入（选择相干的无线电选项后，启用了输入）。
当在选项之间切换将启用文本输入时，自动对焦是可行的。但是，当从将文本输入禁用到可以启用文本输入的选项的选项上切换时，自动对焦会失败。
在下面的示例链接中：
- 选项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
暂时没有评论，来抢沙发吧~