Trigger Submit button with Enter Key React

Question

I would like to press the Enter Key and send a message. I try this:

But there is an error.

<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>

And I want to manage my function:

handleSendMessage = e => {}

I already try OnKeyPressed but I can't call my functions there. Thank you.

I prefer a solution without jquery

Shubham Khatri · Accepted Answer · 2017-12-18 17:39:11Z

7

You would add a keyPress event on the input text input and then detect for an enter key press using 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>
    );

}

answered Dec 18, 2017 at 17:39

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mehdi · Accepted Answer · 2021-05-18 17:38:39Z

0

You can use a form for it and change your button type to 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>

answered May 18, 2021 at 17:38

Mehdi

911 silver badge2 bronze badges

Collectives™ on Stack Overflow

Trigger Submit button with Enter Key React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related