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

Question

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

设置初始值:

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

我假设你会做类似的事情:

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

然后有:

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

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

代码笔:https://codepen.io/anon/pen/KZVeWB?editors=0010

Answer 1

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

解决这个问题的常用方法是将“this”绑定(bind)到事件处理程序:

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

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

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

这是有效的，因为 js 中的 lambda 表达式会自动捕获它们周围的所有内容。它看起来更干净一点。

此外，您应该考虑使用占位符属性: https://www.w3schools.com/tags/att_textarea_placeholder.asp