我使用的是Ionic 7和React 18。当加载组件时,如何使表单上的特定输入自动拥有光标的焦点?我认为“autofocus”是一种方法。
<IonInput
autofocus
placeholder='First Name'
value=''
/>
字符串
但这并没有得到光标焦点。一个例子可以在这里看到--https://stackblitz.com/edit/an5yjh-xqjw5k?file=src%2FApp.tsx,src%2Fcomponents%2FMyForm.tsx。
**编辑:**根据给出的答案,我尝试了这个方法,但焦点没有设置为页面上的唯一字段。
2条答案
按热度按时间wwwo4jvm1#
您可以尝试使用React的
useRef
和useEffect
挂钩:字符串
useRef
挂接创建一个对IonInput
元素的引用(inputRef
)。useEffect
挂接确保在安装组件时在IonInput
上设置焦点。超时用于确保在尝试设置焦点之前加载DOM元素。IonInput
已更新为使用ref={inputRef}
,而不是autofocus
属性。这会在呈现
MyForm
组件时将焦点设置在“First Name”的IonInput
字段上。您可以在this stackblitz中看到它的实际应用。
有没有可能调用setTimeout而元素没有被加载?我很好奇,是否有一种更简单的方法,只有在我们确信输入在屏幕上时才应用焦点。
是的,我已经更新了stackblitz。
由于
IonInput
的呈现是直接的,并且不严重依赖于异步操作,因此最简单和最有效的方法应该是确保在完全装入组件及其所有子组件之后设置焦点。型
MutationObserver
将监视DOM中的更改。当它检测到更改时,它将检查IonInput
是否可用,并设置焦点。断开观察器(mentioned here)允许在设置焦点后断开观察器,以防止进一步进行不必要的检查。
wbgh16ku2#
Ionic为IonInput组件提供了一个名为setFocus的方法
提供的示例将不工作B/C你使用的是提交类型按钮,使用常规的IonButton作品。
字符串