在 React Native 中按下回车时如何禁用在多行 TextInput 中插入新行

Posted 2023-04-18

【中文标题】在 React Native 中按下回车时如何禁用在多行 TextInput 中插入新行

【英文标题】：How to disable inserting new line in multiline TextInput when enter is pressed in React Native

【发布时间】：2020-06-09 18:37:07

【问题描述】：

我想构建一个多行文本输入的聊天应用程序，用户可以在按下输入时发送消息。然而，当用户按下回车键时，无论如何都会插入新行，这会给用户带来不好的体验。

我已经尝试过How to prevent new line when enter is pressed in react-native，但用户在键盘上按 Enter 后新行仍然存在。 当onChangeText 被触发时，我还尝试修剪文本，但似乎仍插入了新行。我知道它在blurOnSubmit=true 时有效，但我想在用户按 Enter 时保持键盘打开。

【问题讨论】：

您可以在输入按钮键码的 keydown 上使用事件监听器

我试过了，但是在我的代码中 onKeyPress 的触发时间比 onChangeText 晚，所以新行已经插入然后调用 onKeyPress。

我现在无法测试它，但是作为一种解决方法，删除 onKeyPress 的最后一个字符（即新行）怎么样？

正如我所说，新行首先插入然后onKeyPress 被触发。如果我删除onKeyPress中的新行，用户会注意到屏幕的闪烁。

【参考方案1】：

只需将其添加到 TextInput -> blurOnSubmit=true

例如：

<TextInput multiline=true numberOfLines=1 blurOnSubmit=true />

【讨论】：

问题说他们想在用户按回车时保持键盘打开，blueOnSubmit=true 将关闭它