React:必须不断更新状态以使textarea可编辑

Question

在我的组件中,我渲染这个textarea:

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

我惊讶地发现我无法输入它.经过一些实验,我发现我正在输入它,但每次我在状态变量中输入一个字符时,反应只是重置值.所以,我已经让它通过添加这个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不做任何事情是一种非常昂贵的方式.是否有更好/正确的方法来解决这个问题,让我编辑textarea？例如,对于表单中的输入字段,我只使用defaultValue,但我需要这一行是多行.

Answer 1

你正在尝试的方式还可以.只需要一点点调整.试试这个:

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

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

并且不要忘记在构造函数中绑定函数,如下所示:

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

当您将其用作受控组件时,状态将始终反映在textarea的值中.