如何在React.js中读取文本文件并在textarea中显示

以下是在React.js项目中读取本地文本文件，并将文件内容展示在textarea组件中的实现方案，附带完整的React组件代码：

import React from 'react';

const Dashboard = () => {
  const handleChange = () => {
    let input = document.querySelector('input');
    let textarea = document.querySelector('textarea');

    input.addEventListener('change', () => {
      let files = input.files;

      if (files.length === 0) return;

      const file = files[0];

      let reader = new FileReader();

      reader.onload = (e) => {
        const fileContent = e.target.result;
        const lines = fileContent.split(/\r\n|\n/);
        console.log(lines);
        textarea.value = lines.join('\n');
      };

      reader.onerror = (e) => alert(e.target.error.name);

      reader.readAsText(file);
    });
  }
  
  return (
    <div style={{display: 'flex'}}>
      <input type="file" name="input" onChange={handleChange}/>
      <textarea cols={30} rows={20} style={{marginTop: 15, width:'50%'}}></textarea>
    </div>
  )
};

export default Dashboard;

实现说明 #

• 监听文件选择框的change事件，获取用户选中的本地文件
• 使用FileReader的readAsText方法读取文本文件内容
• 文件读取成功后，将内容按换行符分割并重新拼接，赋值给textarea以展示内容
• 处理读取错误场景，弹出错误名称提示

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