Ben*_*son 2 javascript fs node.js npm reactjs
我有包含三个输入字段的联系表单，我想在用户单击按钮时将输入值保存到文本文件中。我怎样才能做到这一点.. ？我可以举个例子吗？
我的代码：
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 添加 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 等上提供您的问题的可重现链接；
| 归档时间： |
|
| 查看次数： |
10639 次 |
| 最近记录： |