Javascript React.js-清除焦点上的受控文本区域初始值

对于受控文本区域，它显示了如何设置初始值，然后在更改时更新值。当字段第一次聚焦时，如何清除该初始值而不清除用户的任何进一步输入

设置初始值：

this.state = {
  value: 'Please write an essay'
};

我想你会这样做：

<textarea value={this.state.value} onChange={this.handleChange} onFocus={this.handleFocus} />

虽然这不起作用。有什么建议吗

---

Codepen:

您在

构造函数中错过了
bind
您的
handleFocus
方法

this.handleFocus  = this.handleFocus.bind(this)

在
构造函数
函数中，您错过了
bind
您的
handleFocus
方法

this.handleFocus  = this.handleFocus.bind(this)

如果将函数传递给组件（如事件处理程序），则“this”捕获将丢失。当textarea调用事件处理程序时，“this”将不会引用定义该函数的组件。我认为它实际上会引用事件处理函数本身

通常的解决方法是将“this”绑定到事件处理程序：

onFocus={this.onFocus.bind(this)}

如果使用ES7，还可以将方法定义为lambda成员变量：

class MyComponnet {
  onFocus = (e) => { ... }
  render() {
    return <textarea onFocus={this.onFocus} />
  }
}

类MyComponnet{
onFocus=（e）=>{…}
render（）{
返回
}
}

这是因为js中的lambdas会自动捕获周围的一切。看起来干净一点

也应考虑使用占位符属性来代替：
如果将函数传递给组件（如事件处理程序），则“this”捕获将丢失。当textarea调用事件处理程序时，“this”将不会引用定义该函数的组件。我认为它实际上会引用事件处理函数本身

通常的解决方法是将“this”绑定到事件处理程序：

onFocus={this.onFocus.bind(this)}

如果使用ES7，还可以将方法定义为lambda成员变量：

class MyComponnet {
  onFocus = (e) => { ... }
  render() {
    return <textarea onFocus={this.onFocus} />
  }
}

类MyComponnet{
onFocus=（e）=>{…}
render（）{
返回
}
}

这是因为js中的lambdas会自动捕获周围的一切。看起来干净一点

也应考虑使用占位符属性来代替：
onFocus={this.handleFocus.bind（this）}
onFocus={this.handleFocus.bind（this）}
谢谢，我忘记了绑定（doh！），但一旦更正，仍然存在每次聚焦后重置值的问题。Sava在下面的回答中使用了一个
占位符
，效果非常好。谢谢，我忘记了绑定（doh！），但一旦更正，仍然存在在每次聚焦后重置值的问题。萨瓦在下面的回答中使用了一个
占位符
，效果非常好。谢谢，很好的解释。我应该用占位符代替！谢谢，很好的解释。我应该用占位符代替！