Есть форма поиска 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". Как ее побороть?
Средний
