JSX Text Input doesn't work if it has an onChange property (React)

Question

I'm having an issue where any text input that has an onChange property will not let me type in it. I still do have a milisecond of time that I can type something in it, but I can barely type one letter at a time if I really try.

The way I usually solved this problem was to get the value of the input once using document.getElementById().value, instead of having a function that does it automatically.

Basically I did this

<input id="something" type="text" />
<button onClick={() => doSomething(document.getElementById("something").value)}>Click Me!</button>

instead of this,

<input value={value} onChange={e => setValue(e.target.value)} />
<button onClick={() => doSomething(value)}>Click Me!</button>

but now I need to do some real time updates so I need this method.

onChange={e => setValue(e.target.value)} makes no sense, you're updating the input with it's current value? I think you instead need to bind the value with your state, as outlined here — Alicia Sykes
– Alicia Sykes, Commented May 12, 2022 at 15:36
@Lissy93 I just gave an example, and that value can be used for something else in the code. If I have a realtime display, I'm setting the value for the input AND for the display. — Iland
– Iland, Commented May 12, 2022 at 15:41

Iland · Accepted Answer · 2022-05-13 09:36:17Z

0

It turns out that somehow the fix was to just make on giant React component that stores all the code instead of smaller, organized components.

answered May 13, 2022 at 9:36

Iland

253 bronze badges

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

Collectives™ on Stack Overflow

JSX Text Input doesn't work if it has an onChange property (React)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related