- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有包含三个输入字段的联系表单,我想在用户单击按钮时将输入值保存到文本文件中。我怎样才能做到这一点.. ?我可以举个例子吗?
我的代码:
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>
<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 的文本文件,并且每次当我有新的输入字段位于新行时,我想创建一个文本文件:(..
最佳答案
下面的代码片段应该会给您一个想法。
您可能需要根据目标浏览器为 createObjectURL 添加填充。
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 等上提供您的问题的可重现链接;
关于javascript - 如何使用 ReactJS 将输入值保存到文本文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61237355/
我有一个简单的 pyparsing 构造,用于提取日志消息的部分内容。看起来像这样 log_line = 时间戳 + task_info + Suppress(LineEnd()) 此结构可以很好地解
我想定义一个函数 scaryDict(),它接受一个参数(textfile)并返回 textfile 中的单词按字母顺序排列,基本上生成字典但不打印任何一个或两个字母的单词。 这是我目前所拥有的……不
我正在尝试弄清楚如何包含对外部数据文件(文本形式)的引用,我希望通过 Web Start (JNLP) 与我的应用程序一起分发该文件。筛选 JNLP 结构的文档,我发现您可以包含对 JAR、nativ
我尝试将 Java 程序从 Eclipse 导出到 .jar 文件,但遇到了问题。它运行良好,但由于某种原因它没有找到它应该从中获取数据的文本文件。如果有人能帮忙解决这个问题,我将非常感激。 最佳答案
在过去的 20 个小时里,我试图解决以下问题,所以在开始考虑跳出窗外之前我想,我最好在这里寻求帮助: I have a text file with following content: ID 1 T
今天我试图删除一个简单文本文件中的重复行,例如: input (list.txt): hello hello try output (list.txt): try 我尝试使用 Notepad++ 删除
我将一个文本文件添加到我的项目中,如下路径所示: Myproject/WebPages/stopwords.txt 图片: http://s7.postimg.org/w65vc3lx7/Untitl
所以我在我的程序上工作,现在我无法找到解决方案。我需要在 fext 文件中替换更多的符号,目前程序只将“TIT”替换为代码“*245$a”,如果我想用同样的方式替换其他字母,程序不会改变。有人知道如何
这是一个非常简单的问题,但无论我看哪里,我都会得到不同的答案(这是因为它在 c++0x 中已经改变还是将要改变?): 在 C++ 中,我如何从一个文本文件中读取两个数字并将它们输出到另一个文本文件中?
我有一个 C++ 项目应该添加 到每一行的开头和到每一行的末尾。这适用于普通英文文本,但我有一个中文文本文件,我想这样做,但它不起作用。我通常使用 .txt 文件,但为此我必须使用 .rtf 来保存中
所以我的驱动看起来像这样: #include "problem2.h" #include "problem1.h" #include "problem3.h" #include #include
我有一个包含字符串标识符的 ascii 数字文本文件(>50k 行),可以将其视为数据 vector 的集合。根据用户输入,应用程序在运行时只需要这些数据 vector 之一。 据我所知,我有 3 个
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用,以及预
这个问题在这里已经有了答案: 关闭 12 年前。 Possible Duplicate: Any decent text diff/merge engine for .NET ? 我有两个文本文件,
我正在尝试将对话选择器中的唤醒时间和 sleep 时间记录到这样的文本文件中,但是对方法 commitToFile2 的调用不会 append 文本文件“savedData.txt”。 我知道这段代码
我开发了一个 android webview 并尝试在单击 webview 中的链接时下载生成的数据:文本文件。 webView.setDownloadListener(new Downloa
我在一个文本文件中有 250 张图像/天 4000*3000 像素。 file '/home/user/camdata/nonseqdata.jpg' file '/home/user/camdata
我曾多次尝试将此配置文件转换为多维数组,这意味着我必须读取 config.txt 文件,然后必须将其转换为多维数组。我需要帮助或一些建议。 配置文件: id=www session.timeout=1
我正在尝试使用 sublime text 3 打开文件,我想用光标在具体行号处打开它。 我一直在查subl --help但我找不到混凝土线的选择。因此我只是使用:subl filename 有没有办法
我想在我的应用程序中快速显示一个大文本文件的内容,而不是将整个文件加载到内存中。 其他人是怎么做的? Total Commander是一个很棒的工具,它有一个很棒的内部查看器可以做到这一点。无论文件有
我是一名优秀的程序员,十分优秀!