ReactJS文本编辑器：用户编辑文件后如何写入并保存至状态？

嘿，你已经搞定了文件上传和读取的核心功能，接下来要处理编辑内容的状态保存其实很 straightforward，我来一步步给你拆解具体实现：

1. 给编辑区域绑定实时更新状态的事件 #

首先，假设你用<textarea>作为文本编辑的输入区域（用其他富文本组件逻辑也一致），需要给它绑定onChange事件，让用户的每一次输入都同步到组件状态里：

{/* 编辑区域组件 */}
<textarea
  value={this.state.fileText}
  onChange={this.handleTextChange}
  placeholder="请编辑文件内容..."
  rows={25}
  cols={90}
/>

然后实现对应的handleTextChange方法：

handleTextChange = (e) => {
  const newText = e.target.value;
  // 实时更新当前编辑的文本到state
  this.setState({ fileText: newText }, () => {
    // 【可选但推荐】同步修改内容到当前选中的文件对象中
    const { currentFileIndex, files } = this.state;
    if (currentFileIndex !== -1 && files[currentFileIndex]) {
      // 创建新的文件数组（遵循React状态不可变原则）
      const updatedFiles = [...files];
      updatedFiles[currentFileIndex] = {
        ...updatedFiles[currentFileIndex],
        modifiedText: newText // 新增字段存储修改后的内容
      };
      this.setState({ files: updatedFiles });
    }
  });
};

这里的核心逻辑是：

• 每次输入时立刻更新fileText状态，保证编辑区域的内容和状态完全同步
• 同步到文件对象的modifiedText字段，是为了后续切换文件时能保留修改内容，也方便后续实现“导出修改后的文件”功能

2. 修正文件上传的状态更新逻辑 #

你原来的onFileSelected方法里直接修改了原state的数组（filesArray.push(...)），这不符合React状态不可变的规范，容易导致状态更新异常。我们可以优化一下，同时给每个文件对象新增modifiedText字段：

onFileSelected = (event) => {
  const selectedFile = event.target.files[0];
  if (!selectedFile) return; // 防止用户取消选择文件的情况

  // 直接用File对象的name属性获取文件名，比字符串截取更可靠
  const filename = selectedFile.name;

  // 创建新的文件数组，避免直接修改原state
  const updatedFiles = [
    ...this.state.files,
    {
      fileName: filename,
      file: selectedFile,
      modifiedText: null // 初始化修改内容字段为null
    }
  ];

  this.setState({ files: updatedFiles });
};

3. 优化文件切换逻辑，优先显示修改后的内容 #

当用户切换不同文件时，如果该文件之前被编辑过，我们应该直接显示修改后的内容，而不是重新读取原始文件。修改你的displayFile方法：

displayFile = (i) => { 
  this.setState({ currentFileIndex: i });
  const targetFile = this.state.files[i];

  // 如果该文件有修改后的内容，直接显示
  if (targetFile.modifiedText) {
    this.setState({ fileText: targetFile.modifiedText });
    return;
  }

  // 没有修改过的话，再读取原始文件内容
  const reader = new FileReader(); 
  reader.onload = (e) => { 
    const text = e.target.result; 
    this.setState({ fileText: text });
  }; 
  reader.readAsText(targetFile.file); 
}; 

最后补充：状态初始化 #

别忘了在组件的初始state里定义好需要的字段，比如：

constructor(props) {
  super(props);
  this.state = {
    files: [], // 存储上传的文件列表
    currentFileIndex: -1, // 当前选中的文件索引
    fileText: "", // 当前显示/编辑的文本内容
  };
}

这样一套流程下来，用户编辑的内容会实时同步到组件状态里，切换文件也能正确保留修改痕迹，完全满足你的需求~

内容的提问来源于stack exchange，提问作者Amulya Dubey