0

Есть форма поиска 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". Подскажите, как ее побороть. Спасибо.

1 ответ 1

0

В реакте многие штуки уже типизированы, вам лишь надо их правильно использовать.

Т.к. вы используете getCity в onSubmit, все, что нужно сделать - это узнать, какой эвент используется в этом событии.

Если вы создадите функцию прям в пропе компонента Box, после чего наведёте мышкой на аргумент функции (event), то ваш редактор вам подскажет, какой тип он ожидается (см. пример ниже)

const SearchPanel: React.FC = ({getCity}) => {
      return (
          <Box
              component="form"
              onSubmit={(event)=>{}} //Здесь навести на event
          >
            /*какой-то jsx*/
          </Box>
      );
    }

В данном случае ожидается event: React.FormEvent<HTMLFormElement>

Чтобы инпуты были в эвенте сабмита, их необходимо дабавить в типизацию.

//ваши инпуты
type MyFormField = {
  city: HTMLinputElement;
};

//эвент типизируем как пересечение типов
type MyFormSubmitEvent = React.FormEvent<HTMLFormElement & MyFormField>

const getCity = (e:  MyFormSubmitEvent): void => {
  e.preventDefault();
  setMyCity(e.currentTarget.city.value);
};
3
  • Я так делал, но тогда вываливается ошибка: "Свойство "city" не существует в типе "EventTarget".ts(2339)". Такого свойства там действительно нет, я же его сам создал. Как описать его в моём случае? 6 дек 2022 в 15:17
  • Дополнил ответ.
    – xydope
    6 дек 2022 в 15:55
  • Спасибо, сработало! Я понимал, что надо расширить существующий тип, но не мог понять логику :) А подскажете с передачей функции getWeather через пропсы? Она определяется как React.MouseEventHandler | React.KeyboardEventHandler и это работает, но при попытке перенести ее в другой компонент возникают ошибки (описано во второй части поста). 6 дек 2022 в 19:24

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.