Question

在this example中，对于受控textarea，它显示如何设置初始值，然后更新值onChange。如果首次聚焦字段而不清除用户的任何进一步输入，如何清除此初始值。

设置初始值：

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

我认为你会做类似的事情：

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

然后：

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

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

Answer 1

您错过bind handleFocus constructor方法中的this.handleFocus = this.handleFocus.bind(this)方法

{{1}}

Answer 2

如果将一个函数传递给一个组件，比如一个事件处理程序，那么＆＃34;这个＆＃34;捕获失败。当textarea调用你的事件处理程序时，＆＃34;这个＆＃34;不会引用定义该函数的组件。我认为它实际上会引用它自己的事件处理函数。

解决这个问题的通常方法是绑定这个＆＃39;到事件处理程序：

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

如果您正在使用ES7：

，您还可以将方法定义为lambda成员变量

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

这是有效的，因为js中的lambda会自动捕获它们周围的所有内容。它看起来有点清洁。