TypeScript - onChange event only accept ANY

Question

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>
  );
};

Adam Jenkins · Accepted Answer · 2021-09-18 18:19:50Z

2

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 });
  };

answered Sep 18, 2021 at 18:19

Adam Jenkins

56.3k13 gold badges85 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeScript - onChange event only accept ANY

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related