在 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: ''});
}
虽然这不起作用。有什么建议吗?
最佳答案
如果将函数传递给组件(例如事件处理程序),“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
关于javascript - React.js - 清除焦点上受控文本区域的初始值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47871946/