[英]React Children only expected to receive a single react child when using with TouchableWithoutFeedback
In my application I have a text input, I want to hide the keyboard and lose focus whenever the user clicks anywhere on the screen or closes the keyboard.在我的应用程序中,我有一个文本输入,我想隐藏键盘并在用户单击屏幕上的任意位置或关闭键盘时失去焦点。
I created this function for this:我为此创建了这个函数:
interface DismissKeyBoardProps {
children?: ReactNode
}
const DismissKeyboard: React.FC<DismissKeyBoardProps> = ({ children }) => (
<TouchableWithoutFeedback
onPress={() => Keyboard.dismiss()}> {children}
</TouchableWithoutFeedback>
);
I use the above method like that:我像这样使用上述方法:
const App: React.FC = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<Text> Test </Text>
<DismissKeyboard>
<TextInput placeHolder= {"place holder"}/>
</DismissKeyboard>
</SafeAreaView>
</>
);
};
However, when I try to run it I get an error: React.children.only expected to receive a single React element child.
但是,当我尝试运行它时,我收到一个错误:
React.children.only expected to receive a single React element child.
I don't understand why am I getting this error, when DismissKeyBooard
has indeed only one child - TextInput
.我不明白为什么会出现此错误,因为
DismissKeyBooard
确实只有一个孩子 - TextInput
。
Edit: I tried the suggested solution like that, but I keep getting the same error.编辑:我尝试了类似的建议解决方案,但我不断收到相同的错误。
return (
<View>
<SafeAreaView>
<>
<DismissKeyboard>
<TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} placeHolder={"hint"}/>
</DismissKeyboard>
</>
</SafeAreaView>
</View>
);
Try to wrap your children with <View>
, I guess it will help you.尝试用
<View>
包裹你的孩子,我想它会帮助你。
const DismissKeyboard: React.FC<DismissKeyBoardProps> = ({ children }) => (
<TouchableWithoutFeedback
onPress={() => Keyboard.dismiss()}>
<View>
{children}
</View>
</TouchableWithoutFeedback>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.