react-native中按下回车时如何防止换行答案

【问题标题】：How to prevent new line when enter is pressed in react-nativereact-native中按下回车时如何防止换行
【发布时间】：2016-06-28 06:32:46
【问题描述】：

对于多行文本输入，当用户按下回车键时，我想实现目标：

当用户按下回车键时保持文本输入焦点。
防止添加新行。

我没有看到任何道具可以做什么，有人有想法吗？

react-native 版本为 0.28+，需要支持 ios 和 android。

【问题讨论】：

@Ctc 这不是重复的。您的问题是针对网络的，而不是本机反应。
有同样的问题。在文本更改回调中清理 textinput 的值不仅会导致编辑器本身闪烁，还会更改提示等，因此很明显正在发生一些事情 - 不是一个好的用户体验。仍在寻找更好的解决方案。这不是 DUP。
您找到解决方案了吗？我也想阻止更改。
@Noitidart 在下面查看我的答案

标签： javascript react-native

【解决方案1】：

在 TextInput 中传递 props

blurOnSubmit = {true} 然后在 onBlur 道具中使用 ref 聚焦 textInput 字段，这两个将阻止输入新行并将焦点保留在文本输入字段上。如果只想阻止用户输入换行符blurOnSubmit = {true} 就足够了

这里的缺点是你可以看到键盘隐藏一会儿然后弹出。它有点像黑客。希望有人能想出另一个或即兴发挥这个

【讨论】：

感谢@Tharzeez 引起我的注意。这确实是一个 hack，我将对其进行测试并让您知道它是如何工作的。你在安卓上测试了什么？ IOS？两者都有？
我在ios上测试过，我会用android检查并更新
非常感谢！我还没有机会测试，但我也会在测试时通知您。
非常酷，谢谢！我也会试试看。理想情况下，有一种方法可以在没有键盘闪烁的情况下做到这一点。您是否尝试了受控组件并尝试阻止“输入”键？
我尝试了受控组件，当我按 Enter 键时，它会放置一个新行，并且因为它受控它会删除该新行。看到这个闪烁是很难看的。顺便说一句，你的黑客作品，我忘了提，请原谅。这很好，但我们要么处理键盘闪烁，要么通过控制处理新行闪烁。 :(

【解决方案2】：

您可以使用多行设置TextInput，并将 blurOnSubmit 设置为 false。这将保留键盘并允许输入多行。

并且仅使用 onKeyPress 属性发送消息。

onKeyPress({ nativeEvent: { key: keyValue } }) {
    if (keyValue === "Enter") this.sendMessage();
}

与

onMessageInputChange(message) {
    this.setState({
        message,
    });
}

这应该适用于 Android 和 iOS。

            <TextInput
                value={message}
                onChangeText={this.onMessageInputChange}
                onKeyPress={this.onKeyPress}
                returnKeyType="send"
                blurOnSubmit={false}
                multiline
            />

【讨论】：

不要认为这会阻止添加新行

【解决方案3】：

示例如下：

$(".Post_Description_Text").keydown(function(e) {
  if (e.keyCode == 13 && !e.shiftKey) {
    e.preventDefault();
    alert("New line entered");
  }
});

.Post_Description_Text {
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<textarea name="comment_text" id="comment_text" class="Post_Description_Text"></textarea>

【讨论】：