如何在视图中点击提交按钮而不必先关闭键盘？

Posted 2023-04-18

【中文标题】如何在视图中点击提交按钮而不必先关闭键盘？

【英文标题】：How to tap on a submit button in the view without having to dismiss a keyboard first?

【发布时间】：2018-06-27 08:51:07

【问题描述】：

我正在使用 react native 来实现社区提要。在提要中的每个帖子中，我都可以发表评论，如下所示。

但是，问题是在我输入评论并想按右侧的提交图标后，键盘会先关闭，然后我才能点击图标提交文本。

问题： 如何在按下提交图标后立即提交我的文本而不点击两次（一次关闭键盘，第二次提交）

这是我的实现的 sn-p： //cmets部分/框的代码

<View style=styles.commentSectionContainer>
    <View style=[textInputStyle.dark, textInputStyle.compact]>
      <LocalizedTextInput
        multiline=false
        autoCorrect=true
        onChangeText=onCommentTextChange
        placeholder="placeholder/writeComment"
        style=[textInputStyle.default, fontSize: 13]
        underlineColorandroid="transparent"
        value=textComment
        onSubmitEditing=() => 
          if (textComment) 
            onSubmitComment();
          
        
        returnKeyType="send"
     />
     <View style=styles.iconSubmitContainer>
      <IconButton style=styles.commentSubmit iconName="send" isDisabled=textComment === '' onPress=onSubmitComment hitSlop=hitSlop />
    </View>
  </View>
</View>

本地化文本输入使用以下文本输入

<View style=flex: 1>
  <TextInput
    multiline=multiline
    style=[defaultStyle, flex: 1]
    underlineColorAndroid="transparent"
    autoCorrect=true
    ...otherProps
  />
</View>

所有帖子都包裹在一个滚动视图中。

我尝试使用“keyboardShouldPersistTaps”和keyboardDismissMode="Drag-on"，但它没有产生预期的体验。用户应该能够通过点击文本输入框外的任何地方来关闭键盘，而不是要求滚动.

【问题讨论】：

你在哪里添加了“keyboardShouldPersistTaps”。是否有任何滚动视图组件在其中呈现此组件。我们应该在滚动视图中添加“keyboardShouldPersistTaps”。

【参考方案1】：

如果您的父级是 ScrollView 组件，那么传递 keyboardShouldPersistTaps="always" 属性应该可以解决问题。见官方文档here。

【参考方案2】：

正如 Ankit 所建议的，需要将 prop 传递给滚动视图，但如果这不能为您提供所需的结果，TextInput 有一个 blur() 方法，您可以使用该 TextInput 的 ref 调用该方法。也许这会有所帮助。