React ES6 const - 清除焦点上的输入默认值

Question

我正在尝试清除焦点输入的默认值，但无论是内联还是在外部函数中都无法做到这一点。关于执行此操作的最佳方法的想法？如果我使用 value 而不是 defaultValue 也是同样的问题。

const SomeComponent = (inputValue) => {

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

export default SomeComponent

Answer 1

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

Answer 2

如果你想使用 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 3

重置功能

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()}/>
}

React ES6 const - 清除焦点上的输入默认值

React ES6 const - clear input defaultValue on focus

reactjs

input

redux

onfocus