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 One-liner

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

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

3 个答案: