Enter key event handler on react-bootstrap Input component - reactjs

Question

I have an Input component with a button (buttonAfter property), I set an onClick handler associated to the button and so user can type some text and clic the button to fire the right action.
However, I would like user to be able to press [Enter] key (keycode 13) to achieve the same effect as clicking on the button, just to make the UI easier to use.
I could not find a way to do it, of course I tried onKeydown to register an handler for key down event but it is just ignored.

Answer 1

I think this question is related to React itself instead of react-bootstrap.
Look at this for some basics about React event system: https://facebook.github.io/react/docs/events.html
When you use onKeyDown, onKeyPress or onKeyUp React will pass to your handler an instance of say "target" object with the following properties:
boolean altKey
number charCode
... (for all see link above)
So you can do something like this:
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Input } from 'react-bootstrap';
class TestInput extends React.Component {
handleKeyPress(target) {
if(target.charCode==13){
alert('Enter clicked!!!');
}
}
render() {
return (
<Input type="text" onKeyPress={this.handleKeyPress} />
);
}
}
ReactDOM.render(<TestInput />, document.getElementById('app'));
I tested above code and it works. I hope this is helpful for you.

Answer 2

The question can also be related to React-bootstrap.
React-bootstrap also has a way to handle instance when ever a button or enter key or any form element is pressed.
The below code explains how to handle an instance when enterkey is pressed without the involvement of React Handlers.(and that makes it cool)
import React from "react";
import ReactDOM from "react-dom";
import { FormGroup, FormControl } from "react-bootstrap";
class TestInput extends Component {
search() {
console.log("Enter Button Pressed");
}
render() {
return (
<FormGroup>
<InputGroup>
<FormControl
placeholder="Press Enter"
type="input"
onKeyPress={event => {
if (event.key === "Enter") {
this.search();
}
}}
/>
</InputGroup>
</FormGroup>
);
}
}
React Bootstrap does not support Input form element anymore.
Instead it introduced below items at your disposal
The FormGroup component wraps a form control with proper spacing, along with support for a label, help text, and validation state.
Wrap your form control in an InputGroup, then use for normal add-ons and for button add-ons.
The FormControl component renders a form control with Bootstrap styling.
References:
https://react-bootstrap.github.io/components.html#forms
https://react-bootstrap.github.io/components.html#forms-input-groups

Answer 3

The right way to do it in a form is the same like in regular JavaScript:
Don't use onClick on a button but use type="submit"
The form should be wrapped with <form onSubmit={handler}>
Handler should prevent page reload handler = (event) => event.preventDefault(); processForm()
Now both the button and pressing Enter on any field will call handler
Piece of functional component doing this
function register(event) {
event.preventDefault()
distpach(authActionCreator.register(username, email, password));
}
return (
<Card>
<form onSubmit={register}>
<Card.Body>
<Card.Title as="h4">Register</Card.Title>
<FormGroup controlId="username">
<FormLabel>Username</FormLabel>
<FormControl type="text" label="Username" placeholder="Username" onChange={handleChange} />
</FormGroup>
<FormGroup controlId="email">
<FormLabel>Email</FormLabel>
<FormControl type="email" label="Email" placeholder="Email" onChange={handleChange} />
</FormGroup>
<FormGroup controlId="password">
<FormLabel>Password</FormLabel>
<FormControl type="password" label="Password" placeholder="Password" onChange={handleChange} />
</FormGroup>
<ButtonToolbar>
<Button variant="primary" type="submit">Register</Button>
</ButtonToolbar>
</Card.Body>
</form>
</Card>
);

Answer 4

A somewhat abbreviated version of the already suggested solutions is:
import React from 'react';
import ReactDOM from 'react-dom';
import { Input } from 'react-bootstrap';
const TestInput = () => {
const handleSubmit = () => {
/* handle form submit here */
}
return (
<Input type="text" onKeyPress={event => event.key === "Enter" && handleSubmit()} />
);
}
ReactDOM.render(<TestInput />, document.getElementById('app'));
onKeyPress={event => event.key === "Enter" && handleSubmit()} will ensure handleSubmit is called when the Enter key is pressed.

Answer 5

Uncaught TypeError: Cannot read property 'charCode' of undefined
You have to use:
handleKeyPress(target) {
if (target.key === 'Enter') {
alert('Enter clicked!!!');
}
}