To Call onChange Event After Pressing Enter Key

Extensive solutions and cases

Handling keyboard events and state management

In React, managing input value via the useState hook and updating the state on each key press can be achieved as follows:

const [inputValue, setInputValue] = React.useState('');

const handleOnChange = (e) => {
  setInputValue(e.target.value);  // Keep the state up-to-date, as you type away!
};

const handleKeyPress = (e) => {
  if(e.key === 'Enter') {
    console.log('Enter key pressed!', inputValue);  // Say hello to Enter key!
  }
};

<input value={inputValue} onChange={handleOnChange} onKeyPress={handleKeyPress} />


Disabling default form submission

To disable the default form submission when the Enter key is pressed, e.preventDefault() can be used in your event handler:

  const handleKeyPress = (e) => {
  if(e.key === 'Enter') {
    e.preventDefault();  // Stop! Hammer time!
    // Proceed with custom logic
  }
};


State management for form submission

To track whether the form has been submitted or not, you can utilize _setsSubmitted in the state:

  const [submitted, setSubmitted] = React.useState(false);

  const handleSubmit = (e) => {
    // Only after validation passes, let's change state
    setSubmitted(true);
  };

  // onSubmit event or within handleKeyPress, it's a free world!


Transition to onKeyUp for handling

Event handling can be less intrusive with onKeyUp, triggering the action only after the key is released:

  <input onKeyUp={e => e.key === 'Enter' && yourChangeHandler(e)} />


Keeping it "Classy" with React Components

Events can be handled beautifully in both React.Component or a functional component with hooks.

Class Component:

  class YourComponent extends React.Component {
    handleKeyPress = (e) => {
      if(e.key === 'Enter') {
        // The enter key never had it so good!
      }
    }

    render() {
      return <input onKeyPress={this.handleKeyPress} />;
    }
  }


Functional Component & Hooks:

  const YourComponent = () => {
    const handleKeyPress = (e) => {
      if(e.key === 'Enter') {
        // Enter key meets functional components.
      }
    }

    return <input onKeyPress={handleKeyPress} />;
  }


Keeping an eye on the Blur event

Why not consider using onBlur as an additional trigger for validation? After all, it's not all about the Enter key!

  <input onBlur={e => yourValidationHandler(e)} />


An Enter by any other name

Let's avoid deprecated stuff like keyCode. Instead, we can use e.key to recognize the Enter key press, because 'Enter' is way more descriptive than '13'!

  const handleKeyPress = (e) => {
    if(e.key === 'Enter') {
      // 'Enter' key just got recognized!
    }
  };
