Итак, я имею форму, в которую вношу все данные и после добавления этой формы мне надо удалить весь текст в инпутах. Код мой выглядит так:
const ExpenseForm = () => {
const initialFormState = {
text: "",
number: "",
date: ""
}
const [enteredForm, setEnteredForm] = useState(initialFormState)
const formChangeHandler = (event) => {
setEnteredForm(prevState => {
prevState[event.target.type] = event.target.value;
return prevState;
});
}
const submitHandler = (event) => {
event.preventDefault();
const expenseData = {
title: enteredForm.text,
value: enteredForm.number,
date: new Date(enteredForm.date)
}
setEnteredForm(prevState => {
prevState.text = "";
prevState.number = "";
prevState.date = "";
return prevState
})
}
return (
<form onSubmit={submitHandler}>
<div className="new-expense__controls">
<div className="new-expense__control">
<label>Title</label>
<input type='text' value={enteredForm.text} onChange={formChangeHandler}></input>
</div>
<div className="new-expense__control">
<label>Amount</label>
<input type='number' min='0.01' step='0.01' onChange={formChangeHandler}></input>
</div>
<div className="new-expense__control">
<label>Date</label>
<input type='date' min='2020-01-01' max='2023-12-31' onChange={formChangeHandler}></input>
</div>
</div>
<div className="new-expense__actions">
<button type="submit">Add Expense</button>
</div>
</form>
)
}
В документации нашел как можно сделать с помощью добавления в input значения value (в коде вы можете увидеть, что я применил только на первый input), но при вводе текста в этот input сам текст не отрисовывается, а в сам объект вноситься только последний введенный символ.
Проблема решается, если использовать на каждый input свой useState, но в таком случае будет много дублирующего кода.
Можно ли моим способом осуществить очистку формы, либо он изначально построен неправильно?
.clear()
, который очищает все поля. Вы можете его использовать послеsubmit
формы. И может правильнее обрабатывать неtype
поля, а задать ему все жеname
?