React中Textarea无法编辑：读取后端数据后无法恢复可编辑状态

你遇到的问题核心是直接操作DOM属性违背了React的状态驱动原则——React会以组件state中的值作为唯一可信来源，直接用setAttribute修改DOM属性后，一旦组件重渲染，React会把DOM属性重置回state对应的状态，所以你设置的contentEditable或readOnly会被覆盖，导致无法生效。

正确的做法是用state来管理textarea的只读状态和内容，具体步骤如下：

• 在组件state中新增两个变量：
  • isReadOnly：控制textarea是否只读，初始值设为false
  • value：存储textarea的内容，初始值为空字符串
• 将textarea的readOnly属性绑定到this.state.isReadOnly，value绑定到this.state.value，完全通过state控制DOM状态，不再直接操作DOM
• 修改handleRead函数：获取后端数据后，同时更新value和isReadOnly为true
• 修改onWrite函数：点击textarea时，清空value并将isReadOnly设为false，触发组件重渲染，让textarea变成可编辑状态

修改后的完整代码示例：

import React, { Component } from 'react';
import Button from '你的Button组件路径';

class TextAreaComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      isReadOnly: false
    };
    // 绑定this指向，避免函数调用时this丢失
    this.handleRead = this.handleRead.bind(this);
    this.onWrite = this.onWrite.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  async handleRead() {
    // 模拟从后端获取数据，替换为你的实际接口请求逻辑
    const fetchedData = await fetch('你的后端接口地址').then(res => res.text());
    // 更新state，设置内容并标记为只读
    this.setState({
      value: fetchedData,
      isReadOnly: true
    });
  }

  onWrite() {
    // 清空内容并设置为可编辑
    this.setState({
      value: '',
      isReadOnly: false
    });
  }

  handleChange(e) {
    // 实时更新textarea内容到state
    this.setState({
      value: e.target.value
    });
  }

  render() {
    return (
      <div>
        <div id="text-div" onClick={this.onWrite}>
          <textarea
            id="text"
            rows={13}
            value={this.state.value}
            onChange={this.handleChange}
            readOnly={this.state.isReadOnly}
          />
        </div>
        <Button onClick={this.handleRead}>Read</Button>
      </div>
    );
  }
}

export default TextAreaComponent;

额外提醒：

• 不要直接操作DOM：React的设计理念是通过状态变化驱动视图更新，直接修改DOM会破坏单向数据流，导致状态和视图不一致
• 绑定this：类组件中如果事件处理函数用到this，需要在constructor中绑定，或者用箭头函数定义事件处理函数，避免this指向错误
• readOnly是textarea的标准属性，比contentEditable更适合控制输入框的编辑权限，contentEditable更多用于普通DOM元素（如div）的编辑场景

内容的提问来源于stack exchange，提问作者404a10