Ошибка машинописи при наборе события onChange

Question

Я объявил state, как показано ниже

const [updatedStep, updateStepObj] = useState(
    panel === 'add'
        ? new Step()
        : {
                ...selectedStep
          }
);

, и у меня есть такие элементы, как

        <TextField
            label="Title"
            value={updatedStep.title}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                updateStepObj({ ...updatedStep, title: e.currentTarget.value })
            }
        />

Я получаю Typescript ошибку для события onChange.Как мне избавиться от error?

Answer 1

Вы должны поместить тот же тип данных для метода onChange, что и объявленный TextField, поэтому это будет выглядеть так:

<TextField
   label="Title"
   value={updatedStep.title}
   onChange={(e: React.FormEvent<HTMLInputElement>, newValue?: string) =>
       updateStepObj({ ...updatedStep, title: e.currentTarget.value })
   }
/>

Примечание. Чтобы забыть об этой неразберихе, перед добавлением метода к событию лучше всего навести на него указатель мыши, и он сообщит вам подсказку. Затем вы пишете то же самое и выполняете действие, которое хотите.

В любом случае, если вы хотите что-то более точное, я добавляю демонстрацию в CodeSandbox, и я посмотрю:)