入力値反応jsの1ページから別のページに送信

Question

反応の次のページに入力値を送る必要がありますが、反応jsの変数を渡すことができません。 app.jsxのfirsページ用のコード

class App extends React.Component {  
    componentWillMount() {  
     $(window).load(function(){ 
      $("#username").focus(); 
     })  
    } 
    constructor(newProps) { 
     super(newProps); 

     this.state = { 
     data: '' 
     } 

     this.updateState = this.updateState.bind(this); 
     this.updateStateLogin = this.updateStateLogin.bind(this); 

    }; 

    updateState(e) { 
     this.setState({data: e.target.value}); 
    } 
    updateStateLogin() { 
     this.setState({data: 'enter OTP'}) 
    } 

    handleSubmit(e) { 
    e.preventDefault(); 

    var data1 = $('#username').val().trim();  
    $.ajax({ 
     type: 'GET',   
     url: 'url='+data1, 
     contentType: 'application/json', 
     dataType: 'json', //specify jsonp 
     success: function(data) { 
      if(data.status == true){ 
       var base_path = window.location.protocol + '//' + window.location.host; 
       base_path += '/#/passOtp'; 
       window.location= base_path;    

      }else{ 
       alert("Please enter valid email Id."); 
       $("#username").focus();    
       $("#username").val(''); 
      } 
     }, 
     error: function(e) {   
     console.log("error",e); 
     } 
    }); 
    } 


    handleClick(e){ 

} 

    render() {   
     return (

     <div className="col-lg-12"> 
      <div className="col-lg-4"></div> 
      <div className="col-lg-4 jumbotron "> 
       <form onSubmit={this.handleSubmit} method="post" id="form" action=""> 
         <label for="inputEmail" class="sr-only">Email address</label> 
         <input type="email" className="form-control" name="input_email" id="username" placeholder="email id" value = {this.state.data} onChange = {this.updateState} required="required"/> 
       <p></p> 
       <button className="btn btn-small btn-primary btn-small" type="submit" id="actionButton" onClick={this.handleClick.bind()} style={{background:'#8fc73e',border:'none',boxShadow:'2px 2px 2px #000'}}>Login</button> 
       </form> 
      </div> 
      <div className="col-lg-4"></div> 
     </div> 
    ); 
    } 
}  

export default App; 

次のページのMyコードpassOtp.js：

class App extends React.Component { 

componentWillMount() { 

    $(document).ready(function(datafun){  
     $("#OTP").focus(); 
     $.get("App.jsx", function(data, input_email){ 
        console.log("data: " + input_email); 
       }); 
    }); 

    } 
    constructor(obj) { 
     super(obj); 
     this.state = { 
     userId: obj 
     } 
     this.updateState = this.updateState.bind(this); 
     this.updateStateLogin = this.updateStateLogin.bind(this); 
    }; 

    updateState(e) { 
     this.setState({userId: e.target.value}); 
    } 
    updateStateLogin() { 
     this.setState({userId: 'enter OTP'}) 
    } 

    handleSubmit(e) { 
     e.preventDefault(); 
     var passData = $('#OTP').val().trim(); 
     $.ajax({ 
     type: 'GET',   
     url: 'url='+passData, 
     contentType: 'application/json', 
     dataType: 'json', //specify jsonp 
     success: function(data) { 
      if ("OTP not matched"==data.Response){ 
       alert(data.Response); 
       $("#OTP").focus(); 
       $("#OTP").css("border","1px solid red"); 
       $("#OTP").val(''); 
       //transition.redirect('/passOtp'); 
      } 
      else{ 
       //$("#OTP").html("OTP match."); 

       var base_path = window.location.protocol + '//' + window.location.host; 
       base_path += '/#/main'; 
       window.location= base_path; 

      } 
     }, 
     error: function(e) {   
     console.log("error",e); 
     } 
    });   

    } 
    handleClick(e){   
} 

    render() {   
     return (

     <div className="col-lg-12"> 
      <div className="col-lg-4"></div> 
      <div className="col-lg-4 jumbotron"> 
       <form onSubmit={this.handleSubmit} method="post" id="form" action=""> 
        <label for="inputEmail" class="sr-only">Email address</label> 
         <input type="email" className="form-control" name="input_email" id="userID" value={this.state.userId} onChange = {this.updateState} disabled="" required="required"/> 
        <label for="inputPassword" class="sr-only">Password</label> 
         <input type="password" id="OTP" className="form-control" name="input-password" placeholder="password" required="required"/> 
       <p></p> 
        <button className="btn btn-small btn-primary btn-small " type="submit" onClick={this.handleClick.bind()} style={{background:'#880e4f',border:'none',boxShadow:'2px 2px 2px #000'}}>Submit</button> 
       </form>    
      </div> 
      <div className="col-lg-4"></div> 
     </div> 
    ); 
    }  
} 

export default App; 

私もReactDOM.render（、 のdocument.getElementById（ 'アプリ'）を）チェックしています。輸出のデフォルトのAppの代わりに;

Answer 1

私の問題の答えが見つかりました。 これにはlocalStorageを使用しました。

localStorage.username = $("#username").val().trim(); 

これを次のように受け取りました。

var userId = localStorage.username;