亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 ReactJS 將我的輸入值保存到文本文件中?

如何使用 ReactJS 將我的輸入值保存到文本文件中?

慕勒3428872 2022-07-01 16:37:06
我有帶有三個輸入字段的聯系表單,當用戶單擊按鈕時,我想將輸入值保存到文本文件中。我怎樣才能做到這一點.. ?我可以舉個例子嗎?我的代碼: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 的文本文件,并且每次我有新的輸入字段位于新行時,我想創建一個文本文件:(..
查看完整描述

2 回答

?
catspeake

TA貢獻1111條經驗 獲得超0個贊

下面的代碼片段應該給你一個想法。


根據目標瀏覽器,您可能需要為 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 等上提供您的問題的可重現鏈接;。


查看完整回答
反對 回復 2022-07-01
?
www說

TA貢獻1775條經驗 獲得超8個贊

您可以使用以下包從表單中獲取值并存儲到文件中:


瀏覽器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


查看完整回答
反對 回復 2022-07-01
  • 2 回答
  • 0 關注
  • 274 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號