如何解决react-native中TextInput失去焦点触发事件和按钮点击事件冲突的问题
·
在react-native中如果同时存在TextInput和按钮,如果TextInput获得焦点后,直接点击按钮会出现TextInput失去焦点事件触发,导致按钮事件无法触发
解决方法,亲测可用
在ScrollView中添加keyboardShouldPersistTaps=“handled”
以下是官网描述
如果当前界面有软键盘,那么点击 scrollview 后是否收起键盘,取决于本属性的设置。(译注:很多人反应 TextInput 无法自动失去焦点/需要点击多次切换到其他组件等等问题,其关键都是需要将 TextInput 放到 ScrollView 中再设置本属性)
‘never’ (默认值),点击 TextInput 以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
‘always’,键盘不会自动收起,ScrollView 也不会捕捉点击事件,但子组件可以捕获。
‘handled’,当点击事件被子组件捕获时,键盘不会自动收起。这样切换 TextInput 时键盘可以保持状态。多数带有 TextInput 的情况下你应该选择此项。
false,已过时,请使用’never’代替。
true,已过时,请使用’always’代替。
解决问的代码(如果页面中没有ScrollView就加一个吧)
<ScrollView keyboardShouldPersistTaps="handled">
<View style={styles.formItem}>
<Textstyle={styles.label}>姓名</Text>
<TextInput
style={styles.input}
placeholder="请输入真实姓名"
placeholderTextColor={'#A2A2A2'}
value={formData.personalName || ''}
maxLength={10}
onChangeText={text => handleInputChange('personalName', text)}
/>
</View>
<TouchableOpacity
onPress={() => {
console.log('下一步触发');
handleNextStep();
}}>
<Text style={styles.nextButtonText}>下一步</Text>
</TouchableOpacity>
</ScrollView >
完美解决我的问题。
更多推荐
所有评论(0)