0

Is it possible to get the text from a textfield from material UI without using onChange? It just seems very weird that I would have to onChange keep track of the value then use that value when trying to do anything else.

Here is what I found and tried to use to answer my question

https://stackoverflow.com/a/29792379/15868117

https://reactjs.org/docs/forms.html

Zero Null
  • 1
  • 1
  • 2

2 Answers2

0

If you don't like onChange for some reason, you can use other events, like onBlur for example.

The onblur event occurs when an object loses focus.

Another approach is to use onChange combined with debounce, if you are sending search query to backend, setting 0.5s/1s debounce will prevent sending too many request in short time.

ulou
  • 5,542
  • 5
  • 37
  • 47
0

I think you are looking for this.

Create a state that will track the input change as follows

import {useState} from 'react'
...

const [value, setValue] = useState("")

Then:

<div>
<TextField 
...
value={value}
onChange={e => setValue(e.target.value)}
/>

<p>You typed: {value}<p>
</div>

Let me know if this is what you are looking for.

Wai Ha Lee
  • 8,598
  • 83
  • 57
  • 92
crispengari
  • 7,901
  • 7
  • 45
  • 53
  • 1
    I'm confused by the syntax but that's just because I am new to react. At a glance, this looks fine even though it uses onChange. I will do some more research into useState. Thank you! – Zero Null May 28 '21 at 19:10