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

在React中，这被称为controlled-component。由于你将<textarea>的值设置为this.state.description，<textarea>将始终反映这一点，使React状态成为真理的来源。因此，您还必须处理更改。您可能会成为过早优化的受害者，这通常非常快，并且是最佳实践。在React中，您的组件渲染应该可以根据您的状态和道具进行预测。

然而，正如Arslan所提到的，因为你的处理程序接收event与普通的onChange处理程序相同，更简单的方法就是将你的状态设置为event.target.value，而不是获取对你的<textarea>的引用并获得它的值。

Answer 2

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

<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的值中。

Answer 3

有什么理由为什么textarea内容需要在state？您可以使用另一个变量（或传递给组件的属性）：

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

要么

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

然后，当您准备好使用它时，您将读取onChange的更新值，而不是textarea处理程序。

Answer 4

您正在使用作为受控组件，其中包含的值始终为this.state.description。你是对的，当你以这种方式使用时，你需要提供一个onChange函数，但你不需要设置id并使用文档API。

你可以在这里阅读更多相关信息：https://reactjs.org/docs/forms.html#controlled-components

您不需要将其用作受控组件。如果未设置值prop，则可以按原样键入。然后，当您希望捕获该值时，可以通过ref或id从textarea元素中读取值。