javascript - 提交消息后，textarea出现换行

Question

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

让我解释一下 video 中发生了什么我记录了我的问题:

在发送第一个 hello 消息之前，有一个 placeholder:Your message 。 . .，那么当我发送hello时，你应该看看textarea，这样你会清楚地看到占位符已经不存在了，这是因为发送消息后，我没有知道为什么文本区域在视频中放置换行符，在我发送消息几秒钟后，占位符再次出现，是因为我按下键盘上的删除键/按钮以删除换行符或文本区域中不存在的字符。

该元素的所有 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

当他们按下 enter 键时，您需要取消 keydown 事件。

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