Learning how to get input value when Enter key is pressed in React will be very helpful when you want to get input from the user. So how to do it? Let’s go into detail.
Get input value when Enter key is pressed in React
Use the ‘onKeyDown’ attribute
With the onKeyDown attribute, every time the user press any key, the callback will be called. So you can check if the key is Enter so that input will be got.
Example:
import { useState } from 'react';
import './App.css';
function App() {
const [value, setValue] = useState();
const [submitValue, setSubmitValue] = useState();
const handleEnter = (e) => {
console.log(value);
if (e.keyCode == 13) {
e.preventDefault();
setSubmitValue(value);
}
};
const handleInput = (e) => {
e.preventDefault();
setValue(e.target.value);
};
return (
<div className="App">
<h1>Hello From Learn Share IT</h1>
<form action="" >
<label for='textInput'>Type some thing here: </label>
<input id='textInput' type={'text'} onChange={handleInput} onKeyDown={handleEnter}></input>
</form>
<h3>Your input value is: {submitValue}</h3>
</div>
)
}
export default App;import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);Here, when the key is pressed, I check if the keycode is equal to 13. Here keyCode == 13 means Enter key. If the keycode is equal to 13, I will set the submitValue to the value of the input.
Output:
It also has another keyCode such as alt is 18, the tab is 9, the shift is 16, more and more. It will be beneficial if you want to modify your webpage based on user key press. You can read more about the keycode here.
Use with submit button
You can also combine it with submit button.
Example:
import { useState } from 'react';
import './App.css';
function App() {
const [value, setValue] = useState();
const [submitValue, setSubmitValue] = useState();
const handleEnter = (e) => {
console.log(value);
if (e.keyCode == 13) {
e.preventDefault();
setSubmitValue(value);
}
};
const handleInput = (e) => {
e.preventDefault();
setValue(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
setSubmitValue(value);
};
return (
<div className="App">
<h1>Hello From Learn Share IT</h1>
<form onSubmit={handleSubmit} >
<label for='textInput'>Type some thing here: </label>
<input id='textInput' type={'text'} onChange={handleInput} onKeyDown={handleEnter}></input>
<input type="submit" />
</form>
<h3>Your input value is: {submitValue}</h3>
</div>
)
}
export default App;Output:
Summary
In this tutorial, I’ve shown you how to get input value when Enter key is pressed in React. You can use the onKeyDown event, check keyCode equal to 13, and execute your code logic. Good luck for you!
Maybe you are interested:
- Get the Width of an Element in React
- Submit a form using the Enter key in React.js
- Pass event and parameter onClick in React
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm