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

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> ); }

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

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>

Collectives™ on Stack Overflow

Trigger Submit button with Enter Key React

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related