React ES6 const - 在焦点上清除输入 defaultValue答案

【问题标题】：React ES6 const - clear input defaultValue on focusReact ES6 const - 在焦点上清除输入 defaultValue
【发布时间】：2017-07-31 01:59:19
【问题描述】：

我正在尝试清除焦点上的输入的 defaultValue，但内联或在外部函数中都遇到了麻烦。想到最好的方法来做到这一点？如果我使用 value 而不是 defaultValue 这是同样的问题。

const SomeComponent = (inputValue) => {

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

export default SomeComponent

【问题讨论】：

您编写的代码不起作用。您需要一个带有花括号的 return 内部函数。
SomeComponent 是无状态组件吗？

标签： reactjs input redux onfocus

【解决方案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

【讨论】：

这应该行不通，无状态功能组件没有refs，因为这些只是常规功能（并且您的示例中的this 不会引用该组件）
我会第一个承认，我不是 React 专家，所以它可能会做一些不应该做的事情。但是，如果您将一个函数传递给 ref，即使在像这样的无状态组件中，它也会为您提供一个可以稍后引用的对象。如果函数更复杂，我不会推荐这种方法。但如果它的功能只关注输入，它似乎按预期工作。
将你的代码粘贴到 babel.io/repl，你会看到 this 被转换为 undefined。或者尝试运行它会抛出“TypeError: Cannot set property 'inputField' of undefined”
谢谢帕维尔，看来你是对的。出于某种原因，我的 babel/webpack 设置正在转换组件并包含一个“this”实例供它使用，让上面的代码工作。

【解决方案2】：

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

【讨论】：

【解决方案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()}/>
}

【讨论】：