Javascript 使用ReactDOM解析react中的XML时出现问题

我正在从一个文件解析React应用程序中的一个XML文件， 如果我像硬编码xml那样编写文件侦听器，我会得到正确的答案（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;

import React，{Component}来自'React'；
从“/mainicon.png”导入徽标；
导入“/App.css”；
从“react dom”导入react dom；
类应用程序扩展组件{
// 
建造师（道具）{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（事件）{
const rawFile=new XMLHttpRequest（）；
//在这里，文件将被打开
//按要求提交
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；
警报（所有文本）；
log（xml.querySelector（'ST_TIMERANGE'）.getAttribute（'Weeks'）；
//在这里进行查询。
//xml现在可以像DOM一样进行查询
//var parsedResponse=xml.querySelector（'ST_TIMERANGE'）.getAttribute（'Weeks'）；
//警报（xml.querySelector（'ST_TIMERANGE'）//返回2。
}
};
rawFile.open（'GET'，this.App.files[0]，false）；
send（）；
//var rawFile=new XMLHttpRequest（）；
//var-allText；
//打开（“GET”，this.App.files[0]，false）；
//rawFile.onreadystatechange=函数（）
// {
//if（rawFile.readyState==4）
//     {
//if（rawFile.status==200 | | rawFile.status==0）
//         {
//allText=rawFile.responseText；
////警报（allText）；
//         }
//     }
// }
//rawFile.send（空）；
//
//警报（所有文本）；
}
render（）{
返回(
胰岛素

请在下面的按钮中输入您的insulog XML文件

上载文件：
{
this.App=输入；
}}
/>


提交
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
导出默认应用程序；

因此，您要做的是允许客户端用户选择一个文件，然后您的应用程序将尝试解析XML文件并获取一个值。您不需要使用“XMLHttpRequest”，而是可以使用本机浏览器“FileReader”，它将异步读取所选文件，并通过回调接收文件的内容

您需要添加的一个主要内容是“event.preventDefault（）”，以便在按“提交”后页面不会刷新。第二个主要问题是将“XMLHttpRequest”替换为“FileReader”

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.state={输出：'}；
}
handleSubmit（事件）{
event.preventDefault（）；
const file=this.App.files[0]；
const reader=new FileReader（）；
reader.readAsText（文件）；
reader.onloadend=（evt）=>{
const readerData=evt.target.result；
const parser=new DOMParser（）；
const xml=parser.parseFromString（readerData，'text/xml'）；
警报（xml）；
const output=xml.querySelector（'ST_TIMERANGE'）.getAttribute（'Weeks'）；
this.setState（{output}）
};  
}
render（）{
返回(
胰岛素

请在下面的按钮中输入您的insulog XML文件

上载文件：
{
this.App=输入；
}}
/>


提交
ST_时间范围和周的XML读数：{this.state.output}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
导出默认应用程序；

因此，您要做的是允许客户端用户选择一个文件，然后您的应用程序将尝试解析XML文件并获取一个值。您不需要使用“XMLHttpRequest”，而是可以使用本机浏览器“FileReader”，它将异步读取所选文件，并通过回调接收文件的内容

您需要添加的一个主要内容是“event.preventDefault（）”，以便在按“提交”后页面不会刷新。第二个主要问题是将“XMLHttpRequest”替换为“FileReader”

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.state={输出：'}；
}
handleSubmit（事件）{
event.preventDefault（）；
const file=this.App.files[0]；
const reader=new FileReader（）；
reader.readAsText（文件）；
reader.onloadend=（evt）=>{
const readerData=evt.target.result；
const parser=new DOMParser（）；
const xml=parser.parseFromString（readerData，'text/xml'）；
警报（xml）；
const output=xml.querySelector（'ST_TIMERANGE'）.getAttribute（'Weeks'）；
this.setState（{output}）
};  
}
render（）{
返回(
胰岛素

请在下面的按钮中输入您的insulog XML文件

上载文件：
{
this.App=输入；
}}
/>
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;

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;