提交消息后，文本区出现换行符

Question

我想弄清楚，为什么在我的聊天应用程序中，每次我发送消息时，文本区都会放一个换行符，而不是只关注第一行的文本区，以便我发送新消息。

让我解释一下我录制的关于我的问题的视频中发生了什么:

在发送第一个hello消息之前，有一个placeholder:Your message . . .,然后我发送hello时,你应该看看你会清楚地看到,占位符文本区域没有了,和它因为发送消息后,我不知道为什么把文本区域一个换行符,视频中,一些秒后我发送消息,占位符出现,是因为我在键盘上按下删除键/按钮来删除换行符或不存在字符在文本区域。

我为这个元素准备的所有HTML和CSS都是这个

HTML

<div className="chat-form">
  <textarea className="input-form"
    placeholder="Your message..."
    ref="newMessage"
    onClick={this._onKeyDown}
    autofocus="true" ></textarea>
</div>

CSS

.chat-form {
  ::-webkit-input-placeholder,
  :-moz-placeholder,
  ::-moz-placeholder,
  :-ms-input-placeholder {
    color: #ecf0f1;
    opacity: .4;
  }
  .input-form {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: 1px solid rgba(192,192,192,0.3);
    color: #fff;
    font-size: 0.7em;
    margin-bottom: 0;
    outline: 0;
    padding: 2% 1% 6% 1%;
    position: relative;
    width: 85%;
  }
  textarea {
    resize: none;
  }
}

和JavaScript部分

  _addMessage () {
    let input = this.refs.newMessage.getDOMNode();
    this.props.onAddMessage(input.value);
    input.value = '';
    input.focus();
  }

Answer 1

你需要在他们按回车键时取消keydown事件。

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault