React ES6 const - 在输入框获得焦点时清除默认值

Question

我想在输入框获得焦点时清除其defaultValue，无论是内联或者外部函数都很难实现。您认为最好的方法是什么？如果我使用value而不是defaultValue，问题也是一样的。

const SomeComponent = (inputValue) => {

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

export default SomeComponent

- Kirk Ross

---

你的代码写法是不可行的。在花括号内的函数中，你需要一个return命令。 - Jordan Running

SomeComponent是一个无状态组件吗？ - QoP

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

- Nick Wyman

---

这不应该起作用，无状态函数组件没有 ref，因为它们只是普通函数（在您的示例中，this 不会引用组件）。 - pawel

我必须承认，我并不是React专家，所以它可能会做一些不该做的事情。但是，如果你将一个函数传递给ref，即使在像这样的无状态组件中，它也会为你提供一个对象，以后可以引用它。如果这些函数更加复杂，我不会推荐这种方法。但是，如果功能只是关注于输入的聚焦，那么它看起来似乎正在按预期工作。 - Nick Wyman

将您的代码粘贴到babel.io/repl，您会发现this转换为undefined。或者尝试运行它，它会抛出“TypeError: Cannot set property 'inputField' of undefined”。 - pawel

谢谢pawel，看起来你是正确的。由于我的babel/webpack设置正在转换组件并包含它要使用的"this"实例，所以上面的代码可以工作。 - Nick Wyman

Answer 2

重置功能

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

输入的HTML

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

或者一个聚焦的一行代码

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

- Kenny Ye

Answer 3

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

- inostia