To get input value from an input tag in Reactjs, you can use the target.value
property of the Event which is passed by the onChange
handler whenever the user types on the input tag.
For example first let's make an input tag,
export default InputTag(){
return (
<input type="text" />
);
}
After that, we can attach an onChange
handler to it so that whenever the user types on the input field it should invoke the function provided in the onChange
handler.
NOTE: onChange
attribute - The handler function attached to this attribute will be invoked every time whenever the user types something into the input field.
it can be done like this,
export default InputTag(){
// onChange Handler function
const getInputValue = ()=>{
// do cool stuff here!
};
return (
// Add onChange handler with function to execute
<input type="text" onChange={getInputValue} />
);
}
Now we have a working handler that will be invoked whenever when the user enters something into the input field.
Still, we haven't added the logic to get the user input value. Let's add that now!
Every time the user enters something into the input field a Synthetic Event is passed as a parameter to the onChange
handler function. Thus the user input value is present in the event.target.value
property.
So in the onChange
handler function let's write a parameter called event
like this,
export default InputTag(){
// onChange Handler function
// with event parameter
const getInputValue = (event)=>{
// show the user input value to console
const userValue = event.target.value;
console.log(userValue);
};
return (
// Add onChnage handler with function to execute
<input type="text" onChange={getInputValue} />
);
}
Now type something into the input field and you can see that value by opening the console.
Yay! That's it! 🔥😃. We have successfully retrieved the user input value in Reactjs.
You can also store the userValue
into a react state to use it to process information or for sending the value to a server etc.
See the above code in action in Codesandbox.