Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React ES6 const - clear input defaultValue on focus

I am trying to clear the defaultValue of an input on focus and having trouble doing it either inline or in an external function. Thoughts on the best way to do this? If I use value instead of defaultValue it's the same issue.

const SomeComponent = (inputValue) => {

<input type="text"
  defaultValue={inputValue}
  onFocus = // clear input defaultValue 
  onBlur={() => dosomething()}/>
}

export default SomeComponent
like image 482
Kirk Ross Avatar asked Aug 31 '25 23:08

Kirk Ross


1 Answers

If you want to use React's ref, you can do something like this:

const SomeComponent = (inputValue) => (

  <input type="text"
    defaultValue={inputValue}
    ref={input => this.inputField = input}
    onFocus = {() => this.inputField.value = ""} 
    onBlur={() => dosomething()}/>
)

export default SomeComponent
like image 55
Nick Wyman Avatar answered Sep 03 '25 18:09

Nick Wyman