0

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

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

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

1
  • У формы есть метод .clear(), который очищает все поля. Вы можете его использовать после submit формы. И может правильнее обрабатывать не type поля, а задать ему все же name? 28 авг 2022 в 13:04

1 ответ 1

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>
    )
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.