. Advertisement .
..3..
. Advertisement .
..4..
The React offers us various useful utilities. One among them is the normalized event system. This tutorial focuses on the onChange event in React. This one detects the change in an input’s value.
Let’s see what it is and how it works.
What Is React Onchange?
Javascript enables users to acknowledge an input’s change in value with the onchange attribute. If you build a form in React, you need to use an event to track the input elements’ value.
In React, you can easily store input values in the state object of the components. Thanks to it, the rendering component will control the subsequent inputs.
First, you need to create a state for the input:
import React, { useState } from "react"
function App(props) {
const [name, setName] = useState('')
}
Here is how you define inside the prop:
import React, { useState } from "react"
function App(props) {
const [name, setName] = useState('')
return (
<input
type="text"
name="firstName"
onChange={ (event) => setName(event.target.value) } />
)
}
Finally, let’s use the name state and put it inside the input’s prop:
return (
<input
type="text"
name="firstName"
onChange={ (event) => setName(event.target.value) }
value={name} />
)
How To Use React Onchange
Add An onChange To An Input
The following code can display an input file, which passes the current value to the handleChange function.
...
return (
<input name="firstName" onChange={handleChange} />
);
...
Pass An Input Value To A Function In A React Component
import React from 'react';
function App() {
function handleChange(event) {
console.log(event.target.value);
}
return (
<input name="firstName" onChange={handleChange} />
);
}
export default App;
This handler will return a Synthetic Event object including various useful meta data like name, current value, and input’s id. You can also access the input’s value by using e.target.value. Logging the name of the input field will navigate you to it.
Store An Input Value Inside Of State
Storing the input value inside of state is useful for keeping track of the values of the current input fields. You should employ this function to display values on the UI.
import React from 'react';
function App() {
const [firstName, setFirstName] = useState('');
return (
<input value={firstName} name="firstName" onChange={e => setFirstName(e.target.value)} />
);
}
export default App;
Trigger onChange Event In React
Sometimes, you will have to bypass the onChange event’s default trigger and behavior manually. One of the common cases is when the browser auto-fills your password.
Due to this automatically filling, the onChange fails to fire. If you need the function to perform an animation, you will have to trigger it manually.
The React can swallow and don’t execute some events intentionally to avoid duplicating the same situation. The only solution is to use the setNativeValue() native value setter.
How To Handle Multiple Inputs With React OnChange
The handler will notify all changes to the input and then fire an event depending on them. Here is how it works:
<label>
First name
<input
type="text"
onChange={handleChange}
/>
</label>
With multiple inputs, you need to call the last name field as a second one instead of using the first name one. Various significant changes will be made with a new lastName string.
This one will store the data and implement a new name prop to show up as a name attribute.
import React from "react";
function Form() {
const [state, setState] = React.useState({
firstName: "",
lastName: ""
})
return (
<form>
<label>
First name
<input
type="text"
name="firstName"
value={state.firstName}
onChange={handleChange}
/>
</label>
<label>
Last name
<input
type="text"
name="lastName"
value={state.lastName}
onChange={handleChange}
/>
</label>
</form>
);
}
Conclusion
Understanding how the onChange react event works will help you write more dynamic and powerful forms.
Leave a comment