如何使用 ReactJS 将我的输入值保存到文本文件中？
Posted
技术标签:
【中文标题】如何使用 ReactJS 将我的输入值保存到文本文件中？【英文标题】：How to save my input values to text file with ReactJS? 【发布时间】：2020-07-28 22:21:58 【问题描述】：我有包含三个输入字段的联系表单，当用户单击按钮时，我想将输入值保存到文本文件中。 我怎样才能做到这一点.. ？ 我可以举个例子吗？
我的代码：
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" /><span className="LogoBlink">PIZHINGSTONE</span><img src=logo className="App-logo" /></p>
<Container>
<Row>
<Col>
<ButtonGroup color="secondary" aria-label="outlined primary button group">
<Button className="button">софтуерни инсталации</Button>
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="outlined primary button group">
<Button className="button">хардуерна поддръжка</Button>
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="outlined primary button group">
<Button className="button">отдалечен достъп</Button>
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="outlined primary button group">
<Button className="button">ремонт по домовете</Button>
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="outlined primary button group">
<Button className="button">уеб графичен интерфейс</Button>
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="outlined primary button group">
<Button className="button">уеб базирани приложения</Button>
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="outlined primary button group">
<Button className="button">десктоп приложения</Button>
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="outlined primary button group">
<Button className="button">видеонаблюдение 24/7</Button>
</ButtonGroup>
</Col>
</Row>
</Container>
</header>
<body className="App-Body">
<Container>
<Row>
<Col>
<ul class="list-group2">
<li class="list-group-item2">ИНСТАЛИРАНЕ НА ВСИЧКИ ВИДОВЕ ОПЕРАЦИОННИ СИСТЕМИ LINUX, WINDOWS VISTA/XP/7/8/10, MAC OS, СПОРЕД СИСТЕМНИТЕ ИЗИСКВАНИЯ НА ХАРДУЕРА.</li>
<br />
<li class="list-group-item2"> АБОНАМЕНТНА ХАРДУЕРНА И СОФТУЕРНА ПОДДРЪЖКА НА ВАШИЯТ ОФИС ИЛИ КОРПОРАЦИЯ.</li>
<br />
<li class="list-group-item2">ОТДАЛЕЧЕН ДОСТЪП ЗА РЕШАВАНЕ НА СОФТУЕРНИ ПРОБЛЕМИ.</li>
<br />
<li class="list-group-item2">ВЗЕМАНЕ НА ВАШИЯТ КОМПЮТЪР/ЛАПТОП ОТ АДРЕС И ДОСТАВЯНЕ ДО АДРЕСА СЛЕД РЕМОНТА.</li>
<br />
<li class="list-group-item2">ПРОЕКТИРАНЕ НА УЕБ ГРАФИЧЕН ИНТЕРФЕЙС ЗА ВАШИЯТ БИЗНЕС.</li>
<br />
<li class="list-group-item2">СЪЗДАВАНЕ НА УЕБ И ДЕСКТОП ПРИЛОЖЕНИЯ СПРЯМО НУЖДИТЕ НА ПОТРЕБИТЕЛЯ.</li>
<br />
<li class="list-group-item2">ИНСТАЛИРАНЕ НА КАМЕРИ ЗА ВИДЕОНАБЛЮДЕНИЕ С ДОСТЪП ДО КАМЕРИТЕ ЧРЕЗ МОБИЛНИ УСТРОЙСТВА.</li>
</ul>
</Col>
</Row>
</Container>
<Container>
<Row>
<Col>
<div className="App">
<form id="contact-form" onSubmit=this.handleSubmit.bind(this) method="POST">
<div className="form-group">
<label htmlFor="name">Name</label>
<input type="text" className="form-control" id="name" value=this.state.name onChange=this.onNameChange.bind(this) />
</div>
<div className="form-group">
<label htmlFor="phone">Phone</label>
<input type="number" className="form-control" id="phone" aria-describedby="emailHelp" value=this.state.phone onChange=this.onPhoneChange.bind(this) />
</div>
<div className="form-group">
<label htmlFor="message">Message</label>
<textarea className="form-control" rows="5" id="message" value=this.state.message onChange=this.onMessageChange.bind(this) />
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
</div>
</Col>
</Row>
</Container>
<Container>
<Row>
<Col>
<MapContainer></MapContainer>
</Col>
</Row>
</Container>
</body>
</div>
);
onNameChange(event)
this.setState(name: event.target.value)
onPhoneChange(event)
this.setState(phone: event.target.value)
onMessageChange(event)
this.setState(message: event.target.value)
export default App;
如果不存在扩展名为 .txt 的文本文件，并且每次我有新的输入字段位于新行时，我想创建一个文本文件:(..
【问题讨论】：
你试过什么？你需要付出一些努力 我更新了我的问题。我从这个网站上看到：blog.mailtrap.io/react-contact-form 但我想将所有输入字段保存到文本文件中？ 你的问题没有多大意义，我建议你编辑并尝试形成一个清晰的问题。另外请发布您的代码以及您如何解决问题 为什么？我想我的问题很清楚......我只是不知道如何创建一个文本文件并将我的输入字段写入这个文件......我真的不知道该怎么做...... 【参考方案1】：下面的 sn-p 应该会给你一个想法。
您可能需要为 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 等上提供您的问题的可重现链接；
【讨论】：
我更新了我的问题.. 但我有太多这样的错误：警告：无法在尚未安装的组件上调用 setState。这是一个无操作，但它可能表明您的应用程序中存在错误。而是直接分配给this.state 或在 Wrapper 组件中定义具有所需状态的 state = ; 类属性。
codepen.io/carlo-gambino/pen/JjYKmZE 我尝试更新我的代码，但他无法正常工作..【参考方案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
【讨论】：
Harvey，您的解决方案需要 Node，对吧？我认为 Ben 最初的问题是要求仅使用 React 的解决方案。以上是关于如何使用 ReactJS 将我的输入值保存到文本文件中？的主要内容，如果未能解决你的问题，请参考以下文章