React.js-专注于清除受控textarea初始值

Question

在此示例中，对于受控文本区域，它显示了如何设置初始值，然后更新onChange值。 首次聚焦该字段时，如何清除此初始值，而又不清除用户的任何其他输入。

设置初始值：

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

我想你会做类似的事情：

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

然后有：

  handleFocus(event) {
    this.setState({value: ''});
  }

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

Codepen： https ：//codepen.io/anon/pen/KZVeWB ？ editors = 0010

Answer 1

您错过了在constructor函数中bind handleFocus方法的方法

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

Answer 2

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

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

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

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

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

之所以可行，是因为js中的lambda会自动捕获周围的所有内容。 看起来有点干净。