React Native之弹框存在TextInput,输入框有焦点情况下需要点击两次才可触发事件-解决
来源:互联网 发布:南极争夺战 知乎 编辑:程序博客网 时间:2024/06/08 09:44
Bug情况描述:React Native项目中,点击按钮A出现弹框浮层,弹框中需要TextInput输入数字,键盘浮起来;这时候点击 取消按钮L 或者 确定按钮R,只是让键盘收起,但是并没有触发 取消 或 确定 的事件,必须要再点击第二次才可以触发。另外,当输入框有焦点的情况下,点击 屏幕任意位置(除了键盘),可使键盘收起隐藏;
期待效果:当输入框输完数字后,光标焦点仍然存在,键盘也未消失,这时候点击一次取消按钮L即可让弹框层和键盘同时隐藏;点击一次确定按钮R即可跳转到另一个页面;
尝试的解决方案和解决思路:
1. 用ScrollView包裹TextInput,并且使用keyboardShouldPersistTaps属性,无效:
2. 给TextInput加上ref属性,然后在点击事件中加上this.refs.xxx.blur()让其主动失去焦点,因为失去焦点键盘会自动收起。无效。
3.使用TextInput中的onEndEditing结束编辑属性,有效。
<TextInput style={styles.input1} placeholder="请输入短信验证码" placeholderTextColor={Color.CM_InputTextColor} maxLength={6} keyboardType={'numeric'} onChangeText={(code) => { if (this.state.jdAuth) { Config.JDMobileCode = code; }else { Config.ChinaMobileCode = code; } this.setState({ password: code }) }} value={this.state.password} onEndEditing={()=>{this.endEdit()}}/>
由于我这里是有取消和确定两个按钮需要触发事件的,我在初始化的时候定义了一个标志位变量,用来表示点击的是左按钮还是右按钮,然后在其相应的事件中赋值不同标志位。在执行了endEdit()函数中判断标志位的值,进而执行取消事件还是确定事件,即可。
endEdit(){ if(this.state.isLeft==1){ this.hideModal(); }else if(this.state.isLeft==2){ this.btnOK(); } }
注:目前仍存在一点问题,有更好的解决办法,日后会持续更新。。。也欢迎大佬们留言板分享最佳解决方案
==============================更新======================================
上次说的还有点问题,是第二次进入的时候,第一次点击确定或者取消按钮可以触发。现在bug解决了,添加以下代码:
1.在TextInput组件中加入onSubmitEditing属性,且执行让键盘主动消失的函数;
2.写testBlur函数:<TextInput ref="inputWR" style={styles.input1} placeholder="请输入短信验证码" placeholderTextColor={Color.CM_InputTextColor} maxLength={6} keyboardType={'numeric'} onChangeText={(code) => { if (this.state.jdAuth) { Config.JDMobileCode = code; } else { Config.ChinaMobileCode = code; } this.setState({ password: code }) }} value={this.state.password} onEndEditing={()=> { this.testWR() }} onSubmitEditing={()=>{this.testBlur()}}/>
testBlur(){ this.refs.inputWR.blur();}
现在测试完美了~~~~~~
- React Native之弹框存在TextInput,输入框有焦点情况下需要点击两次才可触发事件-解决
- react native 安卓TextInput点击键盘上的search按钮触发两次的解决办法
- react native TextInput无法弹出输入框问题
- React Native入门(五)之使用输入框TextInput,按钮Button搭建登录界面
- React Native 使用try catch解决TextInput输入的时候中文状态下崩溃的原因
- 解决weex点击事件触发两次
- 点击view两次才触发onclick事件总结
- React-Native 让TextInput主动失去焦点
- React Native之TextInput限制只能输入数字和小数
- React Native之TextInput组件实现联想输入
- 如何在点击特定数据时,不触发输入框失去焦点事件
- Android编辑框EditText需要点击两次触发onclick问题解决
- React Native 之 TextInput使用
- React Native 组件之TextInput
- React Native 之 TextInput使用
- React Native 之 TextInput使用
- React Native之TextInput自定义
- React Native 组件 --TextInput处理文本输入
- c++ BYTE、WORD与DWORD类型
- 【linux】虚拟机开发场景下NAT上网配置
- EVT, DVT, PVT分别是什么意思?
- mysql根据时间戳查询数据
- POI EXCEL
- React Native之弹框存在TextInput,输入框有焦点情况下需要点击两次才可触发事件-解决
- 软件构建(Construction)
- 进度条,TabHost,ViewFlipper、菜单
- 给其他用户添加root权限
- osg控制节点的显示与否
- 剑指offer(C++)——二叉搜索树的第k个结点
- Android JNI 自定义进度条并在C中刷新
- 简单两步使用Unity制作ZigZag游戏
- dubbo调用和maven依赖的区别