How to Use the Enter Key Event Handler on a React-Bootstrap Input Component

May 28, 2020 • 5 Minute Read

Introduction

React-Bootstrap is a popular library of easy-to-use Bootstrap components for React apps.

In this guide, you'll learn about keyboard events and how to submit a form using the enter key event handler for the input control.

Using Keyboard Events in React

Keyboard events are pretty standard in web development. Users interact with a web app using three keyboard events:

onKeyDown
onKeyUp
onKeyPress

These events are triggered when users touch, release, or hold keys, and they are used to to process specific user input.

Any keyboard event could be attached to an HTML element, as explained below.

      <input 
    type="text"
    onKeyUp={this.onKeyUpValue.bind(this)}
/>
    

As you can see in the example above, there is an event called onKeyUp that is used to trigger the event as soon as the keyboard key is pressed.

If you want to get the updated value of the event, you can get it as shown below.

      onKeyUpValue(event) {
    console.log(event.target.value)
}
    

Using event.target.value, the updated value can be fetched and further processed for submitting the form values to the server.

Using the Enter Key Event Handler

It's normal for end users, once they enter values into a form field, topress enter rather than click the submit button.

To prepare for that behavior, be ready with enter key event handling by configuring the onKeyPress event, where the enter key is identified manually to submit the form.

Let’s implement a React-Bootstrap input form control, as discussed above.

      render() {
    const { inputValue } = this.state;

    return (
      <div>
        <InputGroup>
          <FormControl placeholder="First name" onKeyPress={this.onKeyUp} />
        </InputGroup>
        <hr />
        <span>Input value is : {inputValue}</span>
      </div>
    );
}
    

In the above example, there is one input group that has the form control as a text input along with the added property onKeyPress, which is used to get the key press event.

The next step is to bind events into the current context as shown below.

      constructor() {
    super();
    this.state = {
      name: "React-bootstrap key enter event"
    };
    this.onKeyUp = this.onKeyUp.bind(this);
}
    

Now, after binding the event, it’s time to implement the actual event that identifies the event based on the enter key by using the charCode as 13, which is an identifier for the enter key, as explained below.

      onKeyUp(event) {
    if (event.charCode === 13) {
      this.setState({ inputValue: event.target.value });
    }
}
    

The event onKeyUp checks the event char code being triggered by the end user, and if it is 13, then the event has been generated by the enter key.

Otherwise, the state value is not updated into the component state object. Below is the complete code to get the updated value and show it to the user.

      import React, { Component } from "react";
import { InputGroup, FormControl, Input } from "react-bootstrap";

class SimpleKeyEvent extends Component {
  constructor() {
    super();
    this.state = {
      name: "React-bootstrap key enter event"
    };
    this.onKeyUp = this.onKeyUp.bind(this);
  }

  onKeyUp(event) {
    if (event.charCode === 13) {
      this.setState({ inputValue: event.target.value });
    }
  }

  render() {
    const { inputValue } = this.state;

    return (
      <div>
        <InputGroup>
          <FormControl placeholder="First name" onKeyPress={this.onKeyUp} />
        </InputGroup>
        <hr />
        <span>Input value is : {inputValue}</span>
      </div>
    );
  }
}

export default SimpleKeyEvent;
    

When you execute the above example, you will see one input control, type the appropriate value, and press enter. The updated value will be shown to you below the input control.

Identifying Enter as a Key of the Input Control

You can identify the key being pressed based on the string value of the key from the keyboard. Use the key name, like this.

      onKeyUp(event) {
    if (event.key === "Enter") {
      this.setState({ inputValue: event.target.value });
    }
}
    

As soon as you press the enter key, the appropriate key can be identified using the event.key. In the above example, when the enter is key pressed, the input value is updated into the state object.

Conclusion

The React-Bootstrap input control supports all the synthetic keyboard events, including onKeyPress, onKeyDown, and onKeyUp to manage the various keyboard event interactions from the end user.

In this guide, you learned how to check for the enter key event handler along with the React-Bootstrap input element. I hope it is useful to help integrate input controls into your React app.