反应本机。当页面在计时器滴答时重新呈现时,如何将焦点保持在文本输入上
React Native. How do I keep focus to a text input when the page re-renders on timer tick
我正在用 clojurescript 中的 android 上的 react native 编写一个计时器应用程序(希望使用 reagent 并不重要)。
我有一个 TextInput
,我在其中接受来自用户的文本来命名计时器。每当我的计时器计时时,整个 android 应用程序都会重新呈现,而我会失去对 TextInput
的关注。我目前正在使用 onChangeText
来保存我正在输入的字符,有没有办法在计时器滴答作响的同时将注意力集中在文本输入上?
谢谢。
最简单的解决方案是在 componentDidUpdate
方法内部调用 this.refs.yourTextInput.focus()
。但是,这可能会导致键盘向下动画,然后再次向上动画。
问题的根源在于您的计时器值和您的 TextInput 共享相同的范围,因此当更新状态时,计时器和 TextInput 都通过 render
函数重新呈现。理想情况下,您可以:
将您的计时器文本放入自定义组件中,并在该自定义组件上添加一个方法来设置它自己的状态。只要自定义组件的状态是正在更新的状态,这将只导致自定义组件重新呈现。
我正在用 clojurescript 中的 android 上的 react native 编写一个计时器应用程序(希望使用 reagent 并不重要)。
我有一个 TextInput
,我在其中接受来自用户的文本来命名计时器。每当我的计时器计时时,整个 android 应用程序都会重新呈现,而我会失去对 TextInput
的关注。我目前正在使用 onChangeText
来保存我正在输入的字符,有没有办法在计时器滴答作响的同时将注意力集中在文本输入上?
谢谢。
最简单的解决方案是在 componentDidUpdate
方法内部调用 this.refs.yourTextInput.focus()
。但是,这可能会导致键盘向下动画,然后再次向上动画。
问题的根源在于您的计时器值和您的 TextInput 共享相同的范围,因此当更新状态时,计时器和 TextInput 都通过 render
函数重新呈现。理想情况下,您可以:
将您的计时器文本放入自定义组件中,并在该自定义组件上添加一个方法来设置它自己的状态。只要自定义组件的状态是正在更新的状态,这将只导致自定义组件重新呈现。