提交郵件后，textarea發生換行

Question

我試圖弄清楚，為什么在我的聊天應用程序中，每次發送消息時，textarea都會換行而不是只關注第一行中的textarea以便我發送新消息。

讓我解釋一下我錄制的關於問題的視頻中發生了什么：

在發送第一條hello消息之前，有一個placeholder ： Your message . . . Your message . . . ，那么當我發送hello ，您應該查看文本區域，以便清楚地看到占位符不存在了，這是因為發送消息后，我不知道為什么文本區域會在行中插入換行符在發送消息幾秒鍾后的視頻中，占位符再次出現是因為我按下鍵盤上的Delete鍵/按鈕以刪除文本區域中的換行符或不存在的字符。

我為此元素提供的所有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/zh-CN/docs/Web/API/Event/preventDefault