React Query — как очистить форму при успешном отправке данных из формы?

Question

[kiberlain]

Сделал форму и прикрутил Formik

<form onSubmit={formik.handleSubmit}>
<input id="chapter" onChange={formik.handleChange} type="text" placeholder="Раздел" required />
***
<button>Сохранить</button>
</form>

Сохранение данных из формы происходит внутри React Query мутации

const mutation = useMutation((item) =>
        axios({
          method: "POST",
          url: "https://api.***",
          data: item
        })
    );

Вопрос к присутствующим - что нужно написать внутри

if (mutation.isSuccess){

    }

чтобы форма очистилась? formik.resetForm() не работает и вызывает ошибку на скрине

Answer 1

[Mesuti]

+1 вариант

const input = useRef(null)
...
function successSubmit() {
   input.current.value = ""
}
...
<Input ref={input } />

+2 вариант через state

const [state, setState] = useState({
   inputValue: ''
})
...
function successSubmit() {
   setState(prevState => {
        return {
            ...prevState,
            inputValue: ''
        }
    })
}
...
<Input 
   value={state.inputValue} 
   onInput={e => {
    setState(prevState => {
        return {
            ...prevState,
            inputValue: e.target.value
        }
    })
   }}/>

+3 Вариант изощренный - "до лучших времен"

function successSubmit() {
   document.querySelectorAll('input').forEach(i => i.value = '')
}

Comments

[kiberlain]

не стал парится и третий вариант заюзал как самый простой и понятный... Знаю что неправильно - но работает и ладно.
Спасибо )