Блог

Привет, я новичок в typescript, и в моем проекте есть 2 компонента: диалоговое окно ввода и компонент меню настроек. Я использую inputDialog внутри settingmenu компонента

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

 interface InputDialogContentProps {
  inputLabel: string;
  inputType: string;
  onChange?: any;
}

export default function InputDialogContent(props: InputDialogContentProps) {
  const classes = inputDialogStyle();

  return (
    <DialogContent className={classes.dialogContentPlacement}>
      <TextField
        autoFocus
        className={classes.textFieldStyle}
        margin="dense"
        id="name"
        label={props.inputLabel}
        type={props.inputType}
        onChange={props.onChange}
        fullWidth
      />
    </DialogContent>
  

Пожалуйста, обратите внимание, что я объявляю об изменении, как any в этом компоненте.

вот мой документ меню настроек.

 <InputDialogContent
            inputLabel="Email Address"
            inputType="email"
            onChange={onInputChange}
          />

function onInputChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
    setEnableLoginButton(isValidEmail(e.target.value));
  }
  

Как вы можете видеть, я использую onChange для отслеживания изменений внутри текстовой области html.
Итак, вместо any того, как правильно объявить это Onchange внутри компонента InputDialog

Это было бы:

 interface InputDialogContentProps {
  inputLabel: string;
  inputType: string;
  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
//           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
}
  

Это функция, которая принимает один параметр типа React.ChangeEvent<HTMLTextAreaElement> и ничего не возвращает. Общая форма:

 (parameters) => returnType;
  

Подробнее в руководстве по машинописи.