想要在回车但重新加载时发送消息

Question

已在React.js中构建了聊天功能。它可以工作，但是在发送消息时重新加载了页面。按下回车键时可以发送聊天更好，但不应重新加载。该应用程序如何通过Enter键发送消息而无需重新加载。

<form>
  <input
    name="chat"
    type="text"
    placeholder="Enter message"
    value={this.state.chat}
    onChange={this.handleChange}
  />
  <button
    onClick={() => this.handleSend(chat)}
  >
    <span>Send</span>
  </button>
</form>

如果我不使用<form />，则不会重新加载。但是按Enter键时，发送消息无效。

Answer 1

您需要更改按钮的类型，而不是提交。或者将默认行为处理为e.preventDefault()

Answer 2

您有两个选择：

1。）将按钮的类型更改为button，而不是默认的submit。

[2。）提交表单后使用e.preventDefault()功能，以防止执行默认操作来重新加载页面。