Trouble w/ Callback Function in React

Question

I am having trouble actioning a callback function in one of my React classes. Basically I call checkSource on click and then if it meets a specific requirement I want to call handleSubmitClick. I have a feeling this has to do with me calling this.handleSubmitClick, but I don't understand. My understanding is that the this is referring to the component object that I created. If this is the case, shouldn't it just call that function and execute?

The full component is here:

var React = require('react');

module.exports = React.createClass({
  getInitialState: function() {
    return {
      text: ''
    }
  },
  handleTextInput: function(event){
    this.setState({text: event.target.value})

  },
  checkSource: function(){
    var clientId = 'xxxx';
    var resolve = 'http://api.soundcloud.com/resolve?url=';
    $.get(resolve + this.state.text + '&client_id=' + clientId, function(data) {
      $.get('http://api.soundcloud.com/users/' + data.user.id + '/?client_id=' + clientId, function(data) {
        if(data.followers_count < 3000) {
          console.log("handleSubmitClick now");
          this.handleSubmitClick();
        } else {
          return false;
        }
      });
    });
  },
  handleSubmitClick: function() {
    console.log('handleSubmitClick going')
    console.log(this.state.text)
      var linkStore = this.props.linkStore
      linkStore.push(this.state.text)
      this.setState({text: ''})
      this.props.handleListSubmitClick(linkStore)
      console.log(this.props.linkStore)

  },
  render: function() {
    return <div className="row">
      <div className="col-md-8 col-md-offset-2">
        <div className="text-center">
          <h1>Soundcloud3k</h1>
        </div>
        <div className="input-group">
          <input
            onChange = {this.handleTextInput}
            type="text"
            className="form-control"
            placeholder="Search fr..."
            value={this.state.text} />
          <span className="input-group-btn">
            <button
              onClick={this.checkSource}
              className="btn btn-default"
              type="button">Submit!</button>
          </span>
        </div>
      </div>
    </div>
  }


});

This is the render function with the checkSource call

The console logs for the checkSource function works as intended, but I can't get the handleSubmitClick to do anything. I don't get an error or anything in the console. Any ideas?

Oleksandr T. · Accepted Answer · 2016-02-02 11:59:46Z

1

In $.get callback this does not refer to your component, you should set this for each callback. Also return false in ajax callback does not make sense so you can remove it

checkSource: function(){
  var clientId = 'xxxx';
  var resolve = 'http://api.soundcloud.com/resolve?url=';

  $.get(resolve + this.state.text + '&client_id=' + clientId, function(data) {
    $.get('http://api.soundcloud.com/users/' + data.user.id + '/?client_id=' + clientId, function(data) {
      if(data.followers_count < 3000) {
        this.handleSubmitClick();
      }
    }.bind(this));
  }.bind(this));
},

edited Feb 2, 2016 at 11:59

answered Feb 2, 2016 at 10:32

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

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

Collectives™ on Stack Overflow

Trouble w/ Callback Function in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related