Javascript 如何在react js中显示消息

我是新手。我创建了一个登录应用程序，并尝试调用登录rest服务，但无法显示消息

我使用了

var self=this

，因为我无法访问

axiom then

方法中的

this

关键字

下面是按钮提交的代码

       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>

    );    
}

render（）{
if（this.state.loginsucess）{
返回(
);
}
返回(
用户名
暗语
{this.state.message}
登录
);    
}

如何处理上述代码中的{this.state.loginsucess？'''hidden'}。。？ 如何在react js中显示错误或成功消息

在回调中使用arrow函数保持状态范围

axios({
方法：“post”，
网址：loginURL，
数据：bodyFormData，
配置：{headers:{'Content-Type'：'multipart/formdata'}
})
.然后（（响应）=>{//
 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);
          });