Javascript 如何使用ReactJS将输入值保存到文本文件？_Javascript_Node.js_Reactjs_Npm_Fs

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

javascript node.js reactjs npm

Javascript 如何使用ReactJS将输入值保存到文本文件？,javascript,node.js,reactjs,npm,fs,Javascript,Node.js,Reactjs,Npm,Fs,我有三个输入字段的联系人表单，我想在用户单击按钮时将输入值保存到文本文件中。我该怎么做？我可以举个例子吗我的代码： 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 Ma

我有三个输入字段的联系人表单，我想在用户单击按钮时将输入值保存到文本文件中。我该怎么做？我可以举个例子吗

我的代码：

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;

import React，{}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
导入'bootstrap/dist/css/bootstrap.min.css'；
从“reactstrap”导入{Container，Row，Col}；
从“/Map”导入MapContainer；
从“@material ui/core”导入{Button，ButtonGroup}；
从“axios”导入axios；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
电话：''，
消息：“”
};
}
text文件=（）=>{
常量元素=document.createElement（“a”）；
const file=new Blob（[document.getElementById（'message'）.value]，{type:'text/plain'}）；
element.href=URL.createObjectURL（文件）；
element.download=“myFile.txt”；
document.body.appendChild（元素）；//在FireFox中运行此项所需
元素。单击（）；
}
handleSubmit（e）{
e、 预防默认值（）；
axios({
方法：“张贴”，
url:“http://localhost:3000", 
数据：本州
})。然后（（响应）=>{
如果（response.data.status==='success'）{
警报（“已发送消息”）；
这是resetForm（）中的
}else if（response.data.status==='fail'）{
警报（“消息发送失败”）
}
})
}
重置表单（）{
this.setState（{name:''，电话：''，消息：'}）
}
render（）{
返回(
ⅩAПБПУБММССФПППМСБСБ


皮智石
софтуерни инсталации
хардуерна поддръжка
отдалечен достъп
ремонт по домовете
уеб графичен интерфейс
уеб базирани приложения
десктоп приложения
видеонаблюдение 24/7

ССССАЛССАСССССАЧССБСПСССАСССМССССССАСССССССССССССССССССССССССЯАСССССССССССССС


АБМААММААПАПППАПППППАААССПСССССССССССССССССФПППАЯПАЯ





ССМААССССССССССССССССССССССССССССССССССССССССССССССССЯССССЯЯСССССССС








СССССССССПСССПСССПСССССПССССПСССССПССССССССССССССССССССССССССССССССССССССССССС

名称
电话
消息
提交
);
}
onNameChange（事件）{
this.setState（{name:event.target.value}）
}
onPhoneChange（事件）{
this.setState（{phone:event.target.value}）
}
onMessageChange（事件）{
this.setState（{message:event.target.value}）
}
}
导出默认应用程序；

如果不存在扩展名为.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等上提供你的问题的可复制链接；你尝试了什么？你需要显示一些效率来更新我的问题..我从这个网站上看到：但我想将所有输入字段保存到文本文件中？你的问题没有多大意义
  onChange(event) {
    this.setState({[event.target.id]: event.target.value})}
  }