reactjs - 如何在 react 中读取文本文件

Question

Screenshot1 Screenshot2

我想从 React 项目中的文本文件中读取数据，但是当我尝试执行和读取时，我在控制台日志中得到了 HTML 示例代码。

这是函数:

onclick= () =>{
 fetch('data.txt')
  .then(function(response){
    return response.text();
  }).then(function (data) {
    console.log(data);
  })
};

以及调用它的按钮:

<button onClick={this.onclick}>click string</button>

Answer 1

只要尝试一下下面的代码你就会明白

import React, { Component } from 'react';

class App extends Component {

  constructor(props) {
    super(props);
  }

  showFile = async (e) => {
    e.preventDefault()
    const reader = new FileReader()
    reader.onload = async (e) => { 
      const text = (e.target.result)
      console.log(text)
      alert(text)
    };
    reader.readAsText(e.target.files[0])
  }

  render = () => {

    return (<div>
      <input type="file" onChange={(e) => this.showFile(e)} />
    </div>
    )
  }
}

export default App;