当焦点移出/单击文本字段外的其他位置时，React-native关闭键盘 [英] React-native dismiss Keyboard when focus out / clicked somewhere else, outside textfield

问题描述

我是本机反应的新手.我有一个textfield(Input).我希望在用户单击除输入字段以外的其他位置时关闭键盘. 我尝试了此处建议的几种解决方案，例如TouchableWithoudFeedback，但是它们没有用. 另外，我不清楚这一点，我可以使用onFocus内部的任何函数，另一方面，在onBlur或onEndEditing中没有任何作用 这是我的输入组件代码.

I'm new to react-native. I have a textfield(Input). I want to the Keyboard to be dismissed when user clicks somewhere else except input field. I tried several solutions suggested here like TouchableWithoudFeedback, but they did not work. Also, the point which is not clear to me, I can use any function inside onFocus, on the other hand, nothing worked in onBlur or onEndEditing Here is my code of Input component.

<InputGroup borderType='rounded' style={styles.inputGrp}>
                                    <Input placeholder={'Password'} secureTextEntry={true} style={styles.input}
                                           onChangeText={(pin1) => this.setState({pin1: pin1})}
                                           value={this.state.pin1}
                                           maxLength={8}
                                    />

推荐答案

以下是上述问题的解决方案: 将键盘隐藏在react-native

here is the solution to that above question: Hide keyboard in react-native

import {Keyboard, TouchableWithoutFeedback} from 'react-native'

使用TouchableWithoutFeedback包装您的根组件，并在onPress触发Keyboard.dismiss，如下所示

wrap your root component with TouchableWithoutFeedback and trigger Keyboard.dismiss at onPress, like following

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
    <View style={{flex: 1}}>
          ........
          //rest of the component
          ........
    </View>
</TouchableWithoutFeedback>

这篇关于当焦点移出/单击文本字段外的其他位置时，React-native关闭键盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！