javascript - react : Have to constantly update state to make textarea editable

Question

在我的组件中，我渲染了这个文本区域:

<textarea id="descript" rows="8" value={this.state.description} />

我很惊讶地发现我无法输入。经过一些实验，我发现我正在输入它，但每次我向 state 变量输入一个字符时，react 只是重置值。所以，我通过添加这个 onChange 让它让我打字:

<textarea id="descript" rows="8" value={this.state.description} 
  onChange={() => {this.textChanged();}} />

这是处理程序:

textChanged(event) {
    var newDesc = document.getElementById('descript').value;
    this.setState({'description':newDesc});
}

这是可行的，但是让 React 什么都不做是一种非常昂贵的方法。有没有更好/正确的方法来解决这个问题，只让我编辑文本区域？例如，对于表单中的输入字段，我只是使用 defaultValue 代替，但我需要这个是多行的。

Answer 1

您尝试的方式没问题。只需要一点点调整。试试这个:

<textarea 
    id="descript"
    rows="8"
    value={this.state.description} 
    onChange={this.textChanged} 
/>

textChanged(event) {
    this.setState({
        description: event.target.value
    });
}

不要忘记像这样在构造函数中绑定(bind)函数:

this.textChanged= this.textChanged.bind(this);

当您将它用作受控组件时，状态将始终反射(reflect)在文本区域的值中。