Question

我是新来反应js的人。我已经创建了一个登录应用程序，并尝试调用登录休息服务，但是我无法显示消息。

我使用了var self = this，因为我无法在this方法中访问axiom then关键字

下面是按钮提交的代码

       handleSubmit = event => {

          console.log(this);
          event.preventDefault();

          var loginURL = 'http://localhost:8080/rest-api/user/login';
          var bodyFormData = new FormData();
          bodyFormData.set('uname', this.state.uname);
          bodyFormData.set('password', this.state.password);

          var self = this;

          axios({
            method: 'post',
            url: loginURL,
            data: bodyFormData,
            config: { headers: {'Content-Type': 'multipart/form-data' }}
            })
            .then(function (response) {
                //handle success

                console.log('self before');
                console.log(self);

                if(response.data.result === 'Success'){
                      self.setState({
                       loginSuccess: true,
                       responseData: response.data
                     });
                } else {           
                    self.setState({
                       loginSuccess: false,
                       responseData: response.data,
                       message : response.data.message
                     });                   
                }

                console.log('self after');
                console.log(self);

            })
            .catch(function (response) {
                //handle error
                console.log(response);
          });

   }

这是我的html。

 render() {

  if(this.state.loginSuccess){
    return (
      <Home/>
    );
  }
  return (

    <div>

     <Header/>

     <div className="Login">
        <form onSubmit={this.handleSubmit}>  

          <div className="form-group form-group-lg">
            <label htmlFor="uname" className="control-label">Username</label>
            <input type="text" id="uname" className="form-control" value={this.state.uname} onChange={this.handleChange}/>
          </div>

          <div className="form-group form-group-lg">
            <label htmlFor="password" className="control-label">Password</label>
            <input type="password" id="password" className="form-control" value={this.state.password} onChange={this.handleChange}/>
          </div>

          <div className={ this.state.loginSuccess ? '' : 'hidden'}>          
             <div className="alert alert-danger">{ this.state.message }</div> 
          </div>

          <button disabled={!this.validateForm()} type="submit" className="btn btn-lg btn-primary btn-block">Login</button>

        </form>  
      </div>

      <div className="footer">
          <Footer/>
      </div>

    </div>

    );    
}

如何处理{this.state.loginSuccess？ ”：以上代码中的“隐藏”}。如何在React js中显示错误或成功消息？？

Answer 1

在回调中使用箭头功能保持状态范围

 axios({
            method: 'post',
            url: loginURL,
            data: bodyFormData,
            config: { headers: {'Content-Type': 'multipart/form-data' }}
            })
            .then((response)=> {  //<------------- HERE
                //handle success

                console.log('self before');
                console.log(self);

                if(response.data.result === 'Success'){
                      this.setState({
                       loginSuccess: true,
                       responseData: response.data
                     });
                } else {           
                    this.setState({
                       loginSuccess: false,
                       responseData: response.data,
                       message : response.data.message
                     });                   
                }

                console.log('self after');
                console.log(self);

            })
            .catch(function (response) {
                //handle error
                console.log(response);
          });

如何在React JS中显示消息

1 个答案: