React ES6常量-清除焦点上的输入defaultValue

Question

我试图清除焦点上的输入的defaultValue，但无论是内联还是在外部函数中都遇到了问题。你觉得最好的方法是什么？如果我使用value而不是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

这行得通吗？onFocus={e => e.target.value == inputValue ? e.target.value = '' : return null}

Answer 3

重置函数

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

输入HTML

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

或一个onFocus一行程序

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