Question

在我的组件中，我渲染此文本区域：

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

，我惊讶地发现我无法输入。经过一些实验，我发现我正在输入它，但是每当我在状态变量中键入一个字符时，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
    });
}

不要忘了像这样将函数绑定到构造函数中：

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

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

Answer 2

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

但是，正如Arslan所述，由于您的处理程序收到的event与普通onChange处理程序相同，因此一种更简单的方法是将您的状态设置为event.target.value而不是获取对您的<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元素中读取该值。

反应：必须不断更新状态以使文本区域可编辑

4 个答案: