Enter key event handler on react-bootstrap Input component

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.