6. Form ~ Input values and console - florypaul/ReactJS GitHub Wiki
Adding a Form ~ take Input values and console.log
- First add event listeners to your input elements like onChange, onBlur etc.
constant titleChangeHandler = (event) => {
console.log(event.target.value)
};
- Then we save the value in useState and send that value on form submit
const [enteredTitle, setEnteredTitle] = useState('');const [enteredAmount, setEnteredAmount] = useState('');const [enteredDate, setEnteredDate] = useState('');
const titleChangeHandler = (event) =>{
setEnteredTitle(event.target.value);
console.log(enteredTitle)
}
const amountChangeHandler = (event) =>{
setEnteredAmount(event.target.value);
console.log(enteredAmount)
}
const dateChangeHandler = (event) =>{
setEnteredDate(event.target.value);
console.log(enteredDate)
}
For multiple input values we can also pass an object in useState
- Call useState fucntion with an object and pass the variables of all the input values in the object (remember to call this outside the listeners)
const [userInput, setUserInput] = useState({
enteredTitle ='',
enteredDate ='',
enteredAmount ='',
});
2.If you are updating state that previously existed we will use a function inside useState to update all the other input state values.
so in the handler simply call setUserInput function
setUserInput((prevState) => {
return {...prevState, enteredTitle: event.target.value}
});