Calling inside a method another method ReactJS

Question

First of all I am new to React so if there's something to improve tell me.

I have a login form that sends the information with ajax to php,I want to catch the error and update a p element althought i cannot find the way to do it.

When it's wrong the message that I send with php i want to call another method however it says undefined.

   var APP = React.createClass({

    getInitialState:function(){
      return{user:'',pass:'',message:''};
    },
    setUser:function(e){
      this.setState({user:e.target.value});
    },
    setPass:function(e){
      this.setState({pass:e.target.value});
    },
    setErrors:function(errors){
      alert('calling');
      this.setState({message:errors});
    },
    handleForm:function(e){
      e.preventDefault();

      var username = this.state.user;
      var password = this.state.pass;


      $.ajax({
        'url':'prg/loginJSON.php',
        'type':'POST',
         data:{'username':username,'password':password},
         success:function(result){
           if(result.error){
             window.location.href="http://localhost/learnSeries/home.html";
             sessionStorage.setItem('cookiePass',result.token);
           }
           else{
             this.setErrors(result.message);
           }
         },
         error:function(xhr){
           console.log('error ajax' +xhr.responseText);
         }
      });
    },
    render:function(){
    return(
      <form onSubmit={this.handleForm}  id="loginForm" method="post" action="" role="form">
        <label className="is-required">User</label>
        <input type="text"  name="username" onChange={this.setUser} id="username" required placeholder="User"></input>
        <label className="is-required">Password</label>
        <input  type="password"  name="password" onChange={this.setPass} id="password" required placeholder="Password"></input>
        <input  type="submit"  value="Log In"></input>
        <p>{this.state.message}</p>
      </form>
    )
  }
  });
  React.render(<APP />, document.getElementById('site'));

lloiser · Accepted Answer · 2015-02-01 18:14:54Z

1

The this in the success function is not the same as when you started the request with $.ajax. You have to remember it and use it instead of this later on (in my

handleForm:function(e){
      // ...

      // -->
      var self = this;
      // <--
      $.ajax({
         // ...
         success:function(result){
           if(result.error){
             // ...
           }
           else{
             // -->
             self.setErrors(result.message);
             // <--
           }
         },
         // ...
      });

answered Feb 1, 2015 at 18:14

lloiser

1,1919 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brigand Over a year ago

or success: function(result){}.bind(this), and then you can use this in the function (the self pattern is less common in react code than .bind).

Lacrosse343 Over a year ago

This worked for me to declare a self variable in the function body

Collectives™ on Stack Overflow

Calling inside a method another method ReactJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related