@mmoresun

Как правильно определить тип функции и события?

Есть форма поиска SearchPanel.tsx (сделана с использованием Material UI):

const SearchPanel: React.FC<SearchPanelProps> = ({ getCity }) => {
    return (
        <Box
            component="form"
            onSubmit={getCity}
        >
            <TextField
                size='small'
                type="text"
                name='city'
                placeholder='Enter city'
            />
            <Button

                type="submit"
            >
                Get weather
            </Button>
        </Box>
    );
}

Есть функция, которая забирает значение из инпута:

const [myCity, setMyCity] = useState<string>('');

  const getCity: React.MouseEventHandler | React.KeyboardEventHandler = (e: any): void => {
    e.preventDefault();
    setMyCity(e.target.city.value);
  };

Сейчас событие "е" определено как "any", но это плохая практика, и я хочу избавиться от него. Однако не понимаю, какой тип нужно использовать в данном случае?

Также я не знаю, как корректно передать функцию через пропсы из App.tsx в SearchPanel.tsx.

Я создаю тип для пропсов:

export type SearchPanelProps = {
  getCity: React.MouseEventHandler | React.KeyboardEventHandler
}

И использую его в SearchPanel.tsx:

const SearchPanel: React.FC<SearchPanelProps> = ({ getCity }) => { 
// ... 
}

Однако при таком подходе вылезает ошибка "No overload matches this call". Как ее побороть?
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae Куратор тега TypeScript
Тлен
Мужик. Ты спик инглиш или как? MouseEventHandler переводится как "дрессировщик мышей для эвента" "обработчик событий мыши". KeyboardEventHandler как что? Правильно, "обработчик событий клавиатуры".
Давайте подумаем, что же функция с такими типам может ожидать на вход, а? Может, соответственно, события мыши или клавиатуры(MouseEvent/KeyboardEvent)? Да не, бред какой-то.

Но окей, дальше мы назначили пропсам интерфейс, где getCity таки имеет такой тип. И куда же мы передаём этот getCity? А передаём мы его в onSubmit. Скажи же мне, друже, submit - это событие клавиатуры? Или может быть это событие мыши? Ты уверен? Вот и мне кажется что нет.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы