React ES6 Const-焦点上的清晰输入默认值

Question

我试图清除焦点输入的默认值，并且在内联或外部功能中遇到困难。关于最好的方法的想法？如果我使用值而不是defaultValue，那是同一问题。

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

Answer 1

如果要使用React Ref，可以做这样的事情：

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

Answer 2

重置函数

const resetInput = (e) => {
  e.target.value = "";
}

输入html

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

或一个onfocus One-Liner

<input type="text"
  defaultValue={inputValue}
  onFocus={(e) => e.target.value = ""}
  onBlur={() => dosomething()}/>
}

Answer 3

这个可以工作吗？onFocus={e => e.target.value == inputValue ? e.target.value = '' : return null}