React ES6 const - clear input defaultValue on focus

Question

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

Answer 1

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