javascript - 如何避免必须点击 TouchableOpacity 两次才能触发 onPress 事件?
问题描述
我正在使用这个模块,问题是弹出的 Dialogue 元素,它是一个 Modal,有两个 TouchableOpacity 按钮。键入后,当键盘向上时,单击“提交”TouchableOpacity 将首先清除/隐藏键盘,只有第二次点击“提交”TouchableOpacity 才会触发onPress 事件。我可以在这里做些什么作为解决方法?我尝试将其更改为 Button fromreact-native
和 from ,react-native-elements
但它的行为方式相同。
编辑:
组件:
return (
<Modal
animationType="fade"
transparent={true}
visible={this.props.isDialogVisible}
onRequestClose={() => {
this.props.closeDialog();
this.setState({ inputModal: "" });
}}
>
<View style={[styles.container, { ...modalStyleProps }]}>
<TouchableOpacity
style={styles.container}
activeOpacity={1}
onPress={() => {
this.props.closeDialog();
this.setState({ inputModal: "", openning: true });
}}
>
<View style={[styles.modal_container, { ...dialogStyleProps }]}>
<View style={styles.modal_body}>
<Text style={styles.title_modal}>{title}</Text>
<Text
style={[
this.props.message ? styles.message_modal : { height: 0 }
]}
>
{this.props.message}
</Text>
<TextInput
style={styles.input_container}
autoCorrect={
textProps && textProps.autoCorrect == false ? false : true
}
autoCapitalize={
textProps && textProps.autoCapitalize
? textProps.autoCapitalize
: "none"
}
clearButtonMode={
textProps && textProps.clearButtonMode
? textProps.clearButtonMode
: "never"
}
clearTextOnFocus={
textProps && textProps.clearTextOnFocus == true
? textProps.clearTextOnFocus
: false
}
keyboardType={
textProps && textProps.keyboardType
? textProps.keyboardType
: "default"
}
autoFocus={true}
onKeyPress={() => this.setState({ openning: false })}
underlineColorAndroid="transparent"
placeholder={hintInput}
onChangeText={inputModal => {
if (this.props.setBackupCommentText) {
this.props.setBackupCommentText(inputModal);
}
this.setState({ inputModal });
}}
value={value || this.props.backupCommentText}
multiline={true}
/>
</View>
<View style={styles.btn_container}>
<TouchableOpacity
style={styles.touch_modal}
onPress={() => {
this.props.closeDialog();
this.setState({ inputModal: "", openning: true });
}}
>
<Text style={styles.btn_modal_left}>{cancelText}</Text>
</TouchableOpacity>
<View style={styles.divider_btn}></View>
<TouchableOpacity
style={styles.touch_modal}
onPress={() => {
if (
this.props.initValueTextInput &&
this.props.initValueTextInput.trim().length === 0
) {
Toast.show("Comment cannot be empty");
} else {
this.props.submitInput(value);
this.setState({ inputModal: "", openning: true });
if (this.props.setBackupCommentText) {
this.props.setBackupCommentText("");
}
}
}}
>
<Text style={styles.btn_modal_right}>{submitText}</Text>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
</View>
</Modal>
);
解决方案
这可能是因为父滚动视图正在拦截点击手势。要解决此问题,请找到最近的ScrollView
或FlatList
父级并添加keyboardShouldPersistTaps='handled'
属性。这将防止键盘在点击时自动关闭(消耗点击)。您可能需要添加Keyboard.dismiss()
以使其按预期工作。
<ScrollView keyboardShouldPersistTaps='handled'>
...
</ScrollView>
推荐阅读
- python - Sense Hat 的 API show_message 函数不能在消息中间停止
- android - 在上传到 Firebase 存储之前使用 AsyncTask 压缩图像
- android - Firebase user.getDisplayName() 返回 null
- r - 通过 group_by 在 dplyr::do() 上应用增量函数
- apache-kafka - 我可以使用单个 Kafka Connect 附加多个接收器配置吗?
- go - 供应商问题:在我的供应商中找到包文本 (doc.go) 和转换 (examples_test.go)
- c# - 无法将 Heyzap 广告集成到我的 Unity 应用程序中
- java - 带有咖啡因的 Spring Boot 同步缓存不起作用
- ios - Swift:UIView 的背景渐变
- c# - 如何在后面的代码中使引导输入日历完全可见