web-dev-qa-db-ja.com

反応でテキストファイルを読む方法

Screenshot1Screenshot2

反応プロジェクト内のテキストファイルから読み取りたいのですが、実行して読み取ろうとすると、コンソールログにHTMLサンプルコードが表示されます。これは関数です：

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

そしてそれを呼び出すボタン：

` <button onClick={this.onclick}>click string</button>`
reactjstext-filesreadfile
5
Salvadore Rina

以下のコードを試してみてください、あなたは理解するかもしれません

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;
1
林冠宇

プロジェクトはブラウザのlocalhost:3000で利用できます。ファイルは、相対パスを使用して同じ場所で使用できる必要があります。

'data.txt'ブラウザを使用すると、'localhost:3000/data.txt'からロードしようとします。ブラウザでURLをテストします。ファイルのコンテンツを表示できるはずです。そうでない場合-設定を修正するか、パスを調整する（URL全体/他のドメイン？）か、このファイルを適切な場所（ 'pub'ディレクトリ？）に配置する必要があります。

Afterブラウザでこれを理解すると、反応からファイルをロード/フェッチできます。

1
xadm