ReactJSでのファイル操作

Question

私は反応してJSと私は<input type="text">と読んで、その言葉にコメントさせるアプリを持っている新しいです。私はこのコメントをファイルに保存して、同じ名前を再度検索するとデータを取得します。

例えば、私は「魚」を入力しました。 App3はレンダリングし、どこにコメントするかを示します。コメントを投稿すると、新しいファイル（例えば、fish.txt）がどこかに作成されます。私がその言葉に再び訪れたとき、私は過去のコメントを読むことができます。

これは、これまで

class App3 extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.handleChange = this.handleChange.bind(this); 
 
    this.handleSubmit = this.handleSubmit.bind(this); 
 
    this.state = {items: [], text: ''}; 
 
    } 
 

 
    render() { 
 
    return (
 
     <div className="app3"> 
 
     <h1>Comments</h1> 
 
     <div className="commentsSection"> 
 
      <AddComment items={this.state.items} /> 
 
     </div> 
 
     <form onSubmit={this.handleSubmit}> 
 
      <textarea onChange={this.handleChange} value={this.state.text} /> 
 
      <button>Comment</button> 
 
     </form> 
 
     </div> 
 
    ); 
 
    } 
 

 
    handleChange(e) { 
 
    this.setState({text: e.target.value}); 
 
    } 
 

 
    handleSubmit(e) { 
 
    e.preventDefault(); 
 
    var newItem = { 
 
     text: this.state.text, 
 
     id: Date.now() 
 
    }; 
 
    this.setState((prevState) => ({ 
 
     items: prevState.items.concat(newItem), 
 
     text: '' 
 
    })); 
 
    } 
 
} 
 

 
class AddComment extends React.Component { 
 
    render() { 
 
    return (
 
     <ul> 
 
     {this.props.items.map(item => (
 
      <p key={item.id}>{item.text}</p> 
 
     ))} 
 
     </ul> 
 
    ); 
 
    } 
 
}

私のコードでは、事前にどうもありがとうございました:)

Answer 1

あなたの問題が反応する特定のではありません。あなたが知っているようにブラウザ上で反応し、ブラウザはファイルシステムについて何も知らないので、実際にファイルを読むことはできません。ユーザーはファイル入力でアップロードする必要があります。私が信じているのはあなたの要求を満足させるものではない。この場合に必要なのは、ある種のサーバーと永続性です。サーバーは静的ファイルをブラウザ（画像、HTML、スタイル、JavaScriptファイル）に送信し、必要なデータを提供するためにHTTPプロトコルを介してアプリケーションと通信する必要があります。今やサーバーは、ファイル、データベース、またはどこからでもデータを取得できます。