在react js中从一个页面发送到另一个页面的输入值

Question

我需要在react中将输入值发送到下一页，但我无法在react 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;

我的下一页代码。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;