Question

我想按Enter键并发送消息。我试试这个：

但是有一个错误。

<input type="text" className="form-control input-sm chat_input" placeholder="Write your message here..."
                        onChange={this.handleTextChange} value={this.state.newMessage}
                    />
<span className="input-group-btn">
<input type="submit" value="Send" className="btn btn-primary btn-sm" onSubmit={this.handleSendMessage}                       
                    /></span>

我想管理我的功能：

handleSendMessage = e => {}

我已经尝试过OnKeyPressed，但我不能在那里调用我的函数。谢谢。

我更喜欢没有jquery的解决方案

Answer 1

您可以在输入文本输入上添加keyPress事件，然后使用e.which ===13检测输入键按下

onKeyPress = (e) => {
    if(e.which === 13) {
      this.handleSendMessage();
    }
  }
  render() {
    return (
    <div style={styles}>
      <input type="text" className="form-control input-sm chat_input" placeholder="Write your message here..."
        onChange={this.handleTextChange} onKeyPress={this.onKeyPress} value={this.state.newMessage}
      />
      <span className="input-group-btn">
        <input type="submit" value="Send" className="btn btn-primary btn-sm" onSubmit={this.handleSendMessage}
        /></span>
  </div>
    );

}

Answer 2

您可以使用 form 并将您的按钮类型更改为 submit

<form onSubmit={this.handleSendMessage}>
  <input type="text" className="form-control input-sm chat_input"
    placeholder="Write your message here..."
    onChange={this.handleTextChange} value={this.state.newMessage}
  />
  <span className="input-group-btn">
    <input type="submit" value="Send" className="btn btn-primary btn-sm"/>
  </span>
</form>

使用Enter Key React触发提交按钮

2 个答案: