Блог

Главная - Вопросы по программированию - Не удается заставить e.preventDefault работать с React Typescript

Не удается заставить e.preventDefault работать с React Typescript

#javascript #reactjs #typescript

#javascript #reactjs #машинописный текст

Вопрос:

У меня есть компонент, который выглядит следующим образом:

 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() ?

Комментарии:

1. Перезагружается ли страница при отправке? Получаете ли вы какую-либо ошибку проверки типов? Импортируются FormEvent ли amp; ReactElement ?

2. Да, страница перезагружается без ошибок, и да, импортируются FormEvent и ReactElement. Функция submitFeedbackHandler просто вообще не вызывается при отправке формы.

3. Это странно. Это должно работать так, как ожидалось. Можете ли вы показать весь компонент, над которым вы работаете? Возможно, в вашем коде есть что-то, чего вы не показали, препятствующее отправке события.

4. Я нашел проблему. Я добавил required некоторые входные данные в форму. Как ни странно, это onSubmit полностью прекращает вызов. Даже простой вызов () => console.log('onSubmit!') не сработал, поэтому я удалил все необходимые теги из входных данных в формах, и теперь все работает нормально. В этом случае я сам проведу проверку пустых полей вместо того, чтобы полагаться на required тег при вводе.

Ответ №1:

Это может вызвать некоторую головную боль у неопытных разработчиков React, таких как я, так что вот ответ на проблему:

Я добавил required тег к некоторым входным данным в форме. Как ни странно, это onSubmit полностью прекращает вызов. Даже простой вызов onSubmit = {() => console.log('onSubmit!')} не сработал, поэтому я удалил все необходимые теги из входных данных в форме, и теперь все работает нормально. В этом случае я сам проведу проверку пустых полей вместо того, чтобы полагаться на требуемый тег во входных данных.

Я думаю, что это связано с контролируемыми и неконтролируемыми компонентами в React. Мы проведем дальнейшие исследования, чтобы точно выяснить, что является причиной этого. Спасибо вам @Julius Guevarra за вашу помощь.