使用 ReactDOM 在 React 中发布解析 XML
Issue Parsing XML in react using ReactDOM
我正在从一个文件中解析我的 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()"，以便在您按 "submit" 后页面不会刷新。第二个主要的事情是用 "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;
我正在从一个文件中解析我的 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()"，以便在您按 "submit" 后页面不会刷新。第二个主要的事情是用 "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;