Не удается заставить e.preventDefault работать с React Typescript
У меня есть компонент, который выглядит так:
const App = (): ReactElement => {
const submitFeedbackHandler = (e: FormEvent): void => {
e.preventDefault();
// ...
}
return <>
<form onSubmit = {submitFeedbackHandler}>
// ...
<button type='submit'>Submit</button>
</form>
</>
}
Проблема в том, что как бы я ни пытался вызвать submitFeedbackHandler из onSubmit, это не работает. Я пробовал onSubmit = {(e) => submitFeedbackHandler(e)}, но тоже не повезло. Как я могу заставить это работать, чтобы я мог делать e.preventDefault()?
Да, страница перезагружается без ошибок, и да, FormEvent и ReactElement импортируются. Функция submitFeedbackHandler просто не вызывается при отправке формы.
Странно. Он должен работать, как ожидалось. Можете ли вы показать весь компонент, над которым вы работаете? Возможно, в вашем коде есть что-то, что вы не показали, что мешает отправке события.
Я нашел проблему. Я добавил required к некоторым вводам в форме. Как ни странно, это полностью останавливает вызов onSubmit. Даже простой вызов () => console.info('onSubmit!') не работал, поэтому я удалил все необходимые теги из полей ввода в формах, и теперь все работает нормально. В этом случае я сам проверю пустые поля, вместо того чтобы полагаться на тег required на входных данных.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это может вызвать головную боль у неопытных разработчиков React, таких как я, поэтому вот ответ на проблему:
Я добавил тег required к некоторым вводам в форме. Как ни странно, это полностью останавливает вызов onSubmit. Даже простой вызов onSubmit = {() => console.info('onSubmit!')} не работал, поэтому я удалил все необходимые теги из полей ввода в форме, и теперь все работает нормально. В этом случае я сам проверю пустые поля, вместо того чтобы полагаться на требуемый тег на входах.
Я думаю, что это связано с контролируемыми и неконтролируемыми компонентами в React. Проведу дальнейшие исследования, чтобы увидеть, что именно вызывает это. Спасибо @Julius Guevarra за вашу помощь.
Страница перезагружается после отправки? Вы получаете какую-либо ошибку проверки типа?
FormEventиReactElementимпортируются?