Search code examples
javascripttypescripteventsonchangehandle

TypeScript - onChange event only accept ANY


I'm learning TS, and I don't understand why the event, when onChange execute, only accept "any".

I tried to change the event equal React.ChangeEventHandler, but still doesn't work:

  const onNameChange = (e: React.ChangeEventHandler<HTMLInputElement>) => {
    setField({ ...field, name: e.currentTarget.value });
  };

I think, some how, my event needs to be equal to my interface "CountProps". Follow the complete code:

import React, { useState } from "react";

interface FieldProps {
  name: string;
}

export const TextField: React.FC = () => {
  const [field, setField] = useState<FieldProps>({ name: "" });

  console.log(field);

  const onNameChange = (e: any) => {
    setField({ ...field, name: e.currentTarget.value });
  };

  return (
    <div>
      <input
        type="text"
        onChange={onNameChange}
        name="name"
        value={field.name}
      />
    </div>
  );
};


Solution

  • e is not the handler, it's the event. onNameChange is the handler

      const onNameChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
        setField({ ...field, name: e.currentTarget.value });
      };