反应:不能输入自动聚焦输入/键盘选择的输入
反应:不能输入自动聚焦输入/键盘选择的输入
提问于 2021-11-29 15:45:56
我的应用程序中有一个小表格。一切都很顺利。我刚刚在它的一个输入上添加了一个autoFocus，它没有按预期工作:焦点放在正确的输入上，插入符号闪烁等等。但我就是不能在里面输入文字。如果我按下我的制表键，焦点切换到下一个输入，但我仍然不能键入任何东西。
如果我用鼠标选择这些输入中的任何一个(在自动对焦之前或之后/使用制表的焦点)，我可以键入文本，一点问题都没有。如果我将自动焦点放在模式之外的输入上，它是有效的:我可以键入文本。如果我删除所有的自动焦点(就像今天早上那样)，并使用表格导航到我的模式的输入，那么问题是相同的:看上去有焦点，但不能键入任何文本。如果我用鼠标聚焦一个模态的输入，并导航到下一个带有制表的输入，则会出现
- ，我可以输入文本。
我试着在这个自动对焦上加入同样的条件，触发我的模式打开，但是它不会改变任何事情。
因此，总结一下:在处理一个模态的表单时，我需要一个活动的鼠标焦点来输入这种形式的init文本，尽管无论如何都可以实现视觉焦点。
我不确定它会有帮助，但这是我的模式的形式：
<form
name="modifyVersion"
autoComplete="off"
onClick={() => {
changingActiveVersion();
}}
onSubmit={(e) => {
e.preventDefault();
}}
>
<input
type="text"
id="versionNumber"
placeholder="X.Y.Z"
required
value={!existingVersion ? streamVersion : ""}
onChange={(e) => setStreamVersion(e.target.value)}
onKeyUp={(e) => {
if (e.key === "Enter" || e.keyCode === 13) {
handleEditCreate("version");
setModifiedVersion(true);
}
}}
// autoFocus={true}
/>
<input
type="text"
id="versionDescription"
placeholder="description"
required
value={!existingVersion ? versionDescription : ""}
onChange={(e) => setVersionDescription(e.target.value)}
/>
<button
type="button"
onClick={() => {
handleEditCreate && handleEditCreate("version");
setModifiedVersion(true);
}}
>
<i className="bi bi-plus-lg" style={{ fontSize: "1rem" }} />
</button>
</form>Stack Overflow用户
回答已采纳
发布于 2021-11-29 16:03:20
我建议将onShow事件处理程序添加到模型中。
<Modal onShow={() => inputRef.current.focus()} 并在输入中添加一个引用。
<input
type="text"
ref={inputRef}
id="versionNumber"
placeholder="X.Y.Z"
required
value={!existingVersion ? streamVersion : ""}
onChange={(e) => setStreamVersion(e.target.value)}
onKeyUp={(e) => {
if (e.key === "Enter" || e.keyCode === 13) {
handleEditCreate("version");
setModifiedVersion(true);
}
}}
// autoFocus={true}
/>编辑：
由于上面的操作不起作用，我不得不设置一个测试项目来尝试这一点，将value属性更改为defaultValue --它现在应该可以工作了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70157384
复制相关文章
相似问题
腾讯云开发者
