React, очистка формы, после её отправки

Question

Итак, я имею форму, в которую вношу все данные и после добавления этой формы мне надо удалить весь текст в инпутах. Код мой выглядит так:

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, но в таком случае будет много дублирующего кода.

Можно ли моим способом осуществить очистку формы, либо он изначально построен неправильно?

Answer 1

Что-то в этом роде. А если планируете большую форму делать, лучше посмотреть в сторону готовых библиотек типа formik

const ExpenseForm = () => {
    const initialFormState = {
        title: "",
        amount: "",
        date: ""
    }
    const [enteredForm, setEnteredForm] = useState(initialFormState)

    const formChangeHandler = (name, value) => {
        setEnteredForm(prevState => ({
            ...prevState,
            [name]: value
        }));
    }

    const submitHandler = (event) => {
        event.preventDefault();
        setEnteredForm(initialFormState);
    }


    return (
        <form onSubmit={submitHandler}> 
            <div className="new-expense__controls">
                <div className="new-expense__control">
                    <label>Title</label>
                    <input type='text' name="title" value={enteredForm.title} onChange={(e) => formChangeHandler('title', e.target.value)}></input>
                </div>
                <div className="new-expense__control">
                    <label>Amount</label>
                    <input type='number' min='0.01' step='0.01' name="amount" value={enteredForm.amount} onChange={(e) => formChangeHandler('amount', e.target.value)}></input>
                </div>
                <div className="new-expense__control">
                    <label>Date</label>
                    <input type='date' min='2020-01-01' max='2023-12-31' name="date" value={enteredForm.date} onChange={(e) => formChangeHandler('date', e.target.value)}></input>
                </div>
            </div>
            <div className="new-expense__actions">
                    <button type="submit">Add Expense</button>
                </div>
        </form>
    )
}

БЛОГ НА HUSL

React, очистка формы, после её отправки

Ответы (1 шт):