我正在从一个文件中解析我的React应用程序中的XML文件，如果我像硬编码的xml一样编写我的文件监听器，我得到一个正确的答案（2）：
const raw = `<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/xsl" href="ACSPIXMT.xsl" ?>
<IMPORT>
<ACSPIX Type="2106" SN="UI00650521" Ver="3.05.01"/>
<DEVICE Name="Performa" SN="04666273" ModelNum="591" Dt="2018-04-17" Tm="13:53" BGUnit="mg/dL">
</DEVICE>
<RECENTREC Dt="2014-02-11" Tm="18:47"/>
<BGDATA>
<BG Val="226" Dt="2014-02-11" Tm="18:47" D="1"/>
<BG Val="149" Dt="2014-02-08" Tm="18:23" D="1"/>
<BG Val="101" Dt="2014-02-07" Tm="20:56" D="1"/>
<BG Val="275" Dt="2014-02-07" Tm="18:49" D="1"/>
<BG Val="301" Dt="2014-02-06" Tm="19:13" D="1"/>
<BG Val="112" Dt="2014-02-06" Tm="07:20" D="1"/>
<BG Val="213" Dt="2014-02-05" Tm="19:42" D="1"/>
<BG Val="111" Dt="2014-02-05" Tm="12:02" D="1"/>
<BG Val="212" Dt="2014-02-04" Tm="19:18" D="1"/>
</BGDATA>
<STATISTIC>
<ST_TIMERANGE Weeks="2" Dt="2014-02-11"/>
<ST_EVALRESULTS Val="9"/>
<ST_TSTFREQ1 Val="0.6"/>
<ST_TSTFREQ2 Val="1.5"/>
<ST_MBG Val="189"/>
<ST_SD Val=" 74"/>
<ST_HBGI Val="12.3"/>
<ST_LBGI Val="0.0"/>
</STATISTIC>
<CHECK CRC="4816"/>
</IMPORT>`;
const parser = new DOMParser();
const xml = parser.parseFromString(raw, 'text/xml');
console.log(xml.querySelector('ST_TIMERANGE').getAttribute('Weeks'));
但如果我写我的听众来阅读实际文件（这是完全相同的内容）我什么也得不到
handleSubmit(event) {
const rawFile = new XMLHttpRequest();
//here the file will be opened
//submit pressed
rawFile.onreadystatechange = () => {
if (rawFile.readyState === 4 && (rawFile.status === 200 || rawFile.status === 0)) {
const parser = new DOMParser();
const xml = parser.parseFromString(rawFile.response, 'text/xml');
var allText = rawFile.responseText;
alert(allText);
console.log(xml.querySelector('ST_TIMERANGE').getAttribute('Weeks'));
// Do your querying here.
// xml will can now be queried like DOM
// var parsedResponse = xml.querySelector('ST_TIMERANGE').getAttribute('Weeks');
// alert (xml.querySelector('ST_TIMERANGE')) // returns 2.
}
};
你可以帮我吗？我究竟做错了什么 ？
这是我的完整档案：
import React, { Component } from 'react';
import logo from './mainicon.png';
import './App.css';
import ReactDOM from 'react-dom';
class App extends Component {
// <img src={logo} className="App-logo" alt="logo" />
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
const rawFile = new XMLHttpRequest();
//here the file will be opened
//submit pressed
rawFile.onreadystatechange = () => {
if (rawFile.readyState === 4 && (rawFile.status === 200 || rawFile.status === 0)) {
const parser = new DOMParser();
const xml = parser.parseFromString(rawFile.response, 'text/xml');
var allText = rawFile.responseText;
alert(allText);
console.log(xml.querySelector('ST_TIMERANGE').getAttribute('Weeks'));
// Do your querying here.
// xml will can now be queried like DOM
// var parsedResponse = xml.querySelector('ST_TIMERANGE').getAttribute('Weeks');
// alert (xml.querySelector('ST_TIMERANGE')) // returns 2.
}
};
rawFile.open('GET', this.App.files[0], false);
rawFile.send();
// var rawFile = new XMLHttpRequest();
// var allText;
// rawFile.open("GET", this.App.files[0], false);
// rawFile.onreadystatechange = function ()
// {
// if(rawFile.readyState === 4)
// {
// if(rawFile.status === 200 || rawFile.status == 0)
// {
// allText = rawFile.responseText;
// // alert(allText);
// }
// }
// }
// rawFile.send(null);
//
// alert(allText);
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} />
<h1 className="App-title">Insulog</h1>
</header>
<p className="App-intro">
Please Enter your insulog XML file at the button below
</p>
<form onSubmit={this.handleSubmit}>
<label>
Upload file:
<input
type="file"
ref={input => {
this.App = input;
}}
/>
</label>
<br />
<button type="submit">Submit</button>
</form>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
export default App;
所以你要做的是允许客户端用户选择一个文件然后你的应用程序将尝试解析XML文件并获取一个值。您不需要使用“XMLHttpRequest”，而是可以使用将异步读取所选文件的本机浏览器“FileReader”，并通过回调接收文件的内容。
您需要添加的一个主要内容是“event.preventDefault（）”，以便在您按“提交”后不刷新页面。第二个主要的事情是用“FileReader”替换你的“XMLHttpRequest”。
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {output: ''};
}
handleSubmit(event) {
event.preventDefault();
const file = this.App.files[0];
const reader = new FileReader();
reader.readAsText(file);
reader.onloadend = (evt) => {
const readerData = evt.target.result;
const parser = new DOMParser();
const xml = parser.parseFromString(readerData, 'text/xml');
alert(xml);
const output = xml.querySelector('ST_TIMERANGE').getAttribute('Weeks');
this.setState({output})
};
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} />
<h1 className="App-title">Insulog</h1>
</header>
<p className="App-intro">
Please Enter your insulog XML file at the button below
</p>
<form onSubmit={this.handleSubmit}>
<label>
Upload file:
<input
type="file"
ref={input => {
this.App = input;
}}
/>
</label>
<br />
<button type="submit">Submit</button>
</form>
<h2>XML Readings of ST_TIMERANGE and WEEKS: {this.state.output}</h2>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
export default App;