React Typescript input onChange event type?

Question

I'm trying to get text from a input element, setting it to state and then rendering it back into the input box. However I think my event typing is wrong? I've searched online and tried implementing many solutions but none have worked so far. Any help is appreciated.

my component:

import React, { ChangeEvent, ChangeEventHandler, useState } from "react";

export default function Unidirectionflow() {
  const [state4, setState4] = useState("");
  const [state5, setState5] = useState("");

  let handleChange4 = (e: React.FormEvent<HTMLInputElement>): void => {
    setState3((e.target as HTMLInputElement).value);
  };

  let handleChange5 = (event: ChangeEvent<HTMLInputElement>) => {
    setState5(event.currentTarget.value);
  };

  return (
    <main>
      <input type="text" value={state4} onChange={() => handleChange4} />
      <input type="text" value={state5} onChange={() => handleChange5} />
    </main>
  );
}

Typescript input onchange event.target.value

React TypeScript: Correct Types for onChange

Can't type in React TextField Input

https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forms_and_events/

Nawaraj Jaishi · Accepted Answer · 2021-11-24 11:37:31Z

4

You can do like this

export default function Unidirectionflow() {
const [states, setStates] = useState({
state3:'',
state4:''
})

const handleChange = (
    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
  ) => {
    setStates({
      ...states,
      [e.target.name]: e.target.value.trim(),
    });
  };

  return (
    <main>
      <input type="text" name="state3" value={states.state3} onChange={handleChange} />
      <input type="text" name="state4" value={states.state4} onChange={handleChange} />
    </main>
  );
};

answered Nov 24, 2021 at 11:37

Nawaraj Jaishi

4914 silver badges12 bronze badges

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

Comments

LEMUEL ADANE · Accepted Answer · 2023-01-29 09:25:29Z

1

Just do this:

handleChange = (event: Event) => {
      const { value } = event.target as unknown as { value: string };
      setState(value);
};
  
<input type='text' onChange={handleChange} />

And the squeegee lines will go away.

answered Jan 29, 2023 at 9:25

LEMUEL ADANE

8,90416 gold badges65 silver badges77 bronze badges

Comments

Ana Carla Paiva · Accepted Answer · 2022-02-07 12:39:56Z

0

onChange={handleChange} See if this can help you!

answered Feb 7, 2022 at 12:39

Ana Carla Paiva

11 bronze badge

2 Comments

Francisco Hanna Over a year ago

Consider formating code in your answer. Also, add some context to better explain your approach.

Lee Goddard Over a year ago

The question asks for Typescript, which is not mentioned in the answer.

Amila Senadheera · Accepted Answer · 2021-11-20 06:29:05Z

-2

You have forgot to pass the event when calling the function

Try this

onChange={(e) => handleChange(e)}

Or

onChange={handleChange}

Code sandbox => https://codesandbox.io/s/dreamy-pateu-1mc6j?file=/src/App.tsx

answered Nov 20, 2021 at 6:29

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

2 Comments

Amila Senadheera Over a year ago

@Sujio, check this out!!

Lee Goddard Over a year ago

No reference to Typescript as requested in the question

Collectives™ on Stack Overflow

React Typescript input onChange event type?

4 Answers 4

Comments

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related