相关文章推荐
坚强的南瓜  ·  Day ...·  2 月前    · 
成熟的梨子  ·  React ...·  2 月前    · 
聪明的作业本  ·  Example C Program: ...·  2 年前    · 

突发情况:在TextInput获取焦点后我需要触发点击事件,需要点击两次:第一次失去焦点,第二次方可触发点击事件;

百度求助后都说是需要在外层套一个<ScrollView keyboardShouldPersistTaps={'handled'}></ScrollView>

设置 keyboardShouldPersistTaps属性;

keyboardShouldPersistTaps

如果当前界面有软键盘,那么点击scrollview后是否收起键盘,取决于本属性的设置。(译注:很多人反应TextInput无法自动失去焦点/需要点击多次切换到其他组件等等问题,其关键都是需要将TextInput放到ScrollView中再设置本属性)

  • 'never' (默认值),点击TextInput以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
  • 'always' ,键盘不会自动收起,ScrollView也不会捕捉点击事件,但子组件可以捕获。
  • 'handled' ,当点击事件被子组件捕获时,键盘不会自动收起。这样切换TextInput时键盘可以保持状态。多数带有TextInput的情况下你应该选择此项。

但是我反反复复试验之后没有效果。

解决方案:网友的解决方案是对的,错的是我这是一个城市列表,用<SectionList/>写的,而我的搜索框是<SectionList/>的头部组件ListHeaderComponent 写的,所以我应该是在<SectionList/>上加 keyboardShouldPersistTaps={'handled'} ;而不是在TextInput外面再裹一层;

同理:如果是<ScrollView/>内多个TextInput切换也是会点击2次才回去焦点,处理方法同上;

最后,目的实现了,但是键盘没有收回去,这时我们只好手动触发键盘事件了,也很简单;

先引入‘dismissKeyboard’模块,然后再事件触发dismissKeyboard()方法;搞定;

const dismissKeyboard = require('dismissKeyboard'); clearSearch(){ dismissKeyboard() 添加外层view 点击事件 点击事件 调用this.refs. textInput 1.blur();即可 部分代码如下:let ZKLTest1 = React .createClass({ getInitialState:function(){ return { input edNum:'', input edPW:'',
你是否还在为 React input 事件 处理的繁琐而头疼?是否厌倦了写一堆useState onChange样板代码?本文将彻底解析Svelte与 React 在输入 事件 处理上的核心差异,让你一文掌握两种 架的设计哲学与实战技巧。读完本文,你将能够: - 理解Svelte双向绑定的底层原理 - 掌握 React 受控组件的优化策略 - 学会根据场景选择最适合的 架方案 ## 数据流向:从单向到双向的范式转...
Bug情况描述: React Native 项目中, 点击 按钮A出现弹 浮层,弹 中需要 TextInput 输入数字,键盘浮起来;这时候 点击 取消按钮L 或者 确定按钮R,只是让键盘收起,但是并没有 触发 取消 或 确定 的 事件 ,必须要再 点击 第二次才可以 触发 。另外,当输入 焦点 的情况下, 点击 屏幕任意位置(除了键盘),可使键盘收起隐藏; 期待效果:当输入 输完数字后,光标 焦点 仍然存在,键盘也未消失,这时
After a lot of research, I was able to find a monkey patch for this issue on Android (I’m currently developing an Android app only). We should create a Native Module that calls Input MethodManager to c...