如何使用 ReactJS 将我的输入值保存到文本文件中？

Question

我有带有三个输入字段的联系表单，当用户单击按钮时，我想将输入值保存到文本文件中。我怎样才能做到这一点.. ？我可以举个例子吗？

我的代码：

import React, { } from 'react';

import logo from './logo.svg';

import './App.css';

import 'bootstrap/dist/css/bootstrap.min.css';

import { Container, Row, Col } from 'reactstrap';

import MapContainer from "./Map";

import { Button, ButtonGroup } from '@material-ui/core';

import axios from 'axios';

class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      name: '',

      phone: '',

      message: ''

    };

  }

  TextFile = () => {

    const element = document.createElement("a");

    const file = new Blob([document.getElementById('message').value], {type: 'text/plain'});

    element.href = URL.createObjectURL(file);

    element.download = "myFile.txt";

    document.body.appendChild(element); // Required for this to work in FireFox

    element.click();

  }

  handleSubmit(e){

    e.preventDefault();

    axios({

      method: "POST", 

      url:"http://localhost:3000", 

      data:  this.state

    }).then((response)=>{

      if (response.data.status === 'success'){

        alert("Message Sent."); 

        this.resetForm()

      }else if(response.data.status === 'fail'){

        alert("Message failed to send.")

      }

    })

  }

  resetForm(){

     this.setState({name: '', phone: '', message: ''})

  }

  render() {

    return (

      <div className="App">

        <header className="App-header">

          <span className="Logo">ХAРДУЕРЕН И СОФТУЕРЕН СЕРВИЗ</span>

          <br />

          <p><img src={logo} className="App-logo" alt="logo" /><span className="LogoBlink">PIZHINGSTONE</span><img src={logo} className="App-logo" alt="logo" /></p>

如果不存在扩展名为 .txt 的文本文件，并且每次我有新的输入字段位于新行时，我想创建一个文本文件:(..

Answer 1

下面的代码片段应该给你一个想法。根据目标浏览器，您可能需要为 createObjectURL 添加一个 polyfill。&nbsp; TextFile = () => {&nbsp; &nbsp; const element = document.createElement("a");&nbsp; &nbsp; const file = new Blob([document.getElementById('myInput').value], {type: 'text/plain'});&nbsp; &nbsp; element.href = URL.createObjectURL(file);&nbsp; &nbsp; element.download = "myFile.txt";&nbsp; &nbsp; document.body.appendChild(element); // Required for this to work in FireFox&nbsp; &nbsp; element.click();&nbsp; }编辑 - 您不需要每个输入的单独功能，您可以将它们组合成一个并删除onNameChange onPhoneChange等&nbsp; onChange(event) {&nbsp; &nbsp; this.setState({[event.target.id]: event.target.value})}&nbsp; }将 onChange 函数放在函数之前render()..如果这不起作用，请在 codepen/jsfiddle 等上提供您的问题的可重现链接；。

Answer 2

您可以使用以下包从表单中获取值并存储到文件中：浏览器FSvar fs = require('fs');fs.writeFile('/test.txt', 'Cool, I can do this in the browser!', function(err) {&nbsp; fs.readFile('/test.txt', function(err, contents) {&nbsp; &nbsp; console.log(contents.toString());&nbsp; });});阅读更多：https ://github.com/jvilk/BrowserFS