如何使用 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。

  TextFile = () => {

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

    const file = new Blob([document.getElementById('myInput').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();

  }

编辑 - 您不需要每个输入的单独功能，您可以将它们组合成一个并删除onNameChange onPhoneChange等

  onChange(event) {

    this.setState({[event.target.id]: event.target.value})}

  }

将 onChange 函数放在函数之前render()..

如果这不起作用，请在 codepen/jsfiddle 等上提供您的问题的可重现链接；。

Answer 2

您可以使用以下包从表单中获取值并存储到文件中：

浏览器FS

var fs = require('fs');

fs.writeFile('/test.txt', 'Cool, I can do this in the browser!', function(err) {

  fs.readFile('/test.txt', function(err, contents) {

    console.log(contents.toString());

  });

});

阅读更多：https ://github.com/jvilk/BrowserFS