Ajax和React函数

Question

I have this ajaxify form which submits the data well, however I want to pass data from this ajax code to a React component to update the view after successfully submitting the data. How do I pass some data to React using a function?

When using the code below it gives me 'unidentified function', how can make it accessible to both ajax and React?

$('#upload').ajaxForm({
  success: function(data) {
    newlocal(data);
  }
});

And this is the React code I use:

var Postlist = React.createClass({
  getInitialState: function(){
    return {posts: []};
  },
  newLocal : function(data){
    alert(data);
  },

Answer 1

The callback that you are passing to the ajaxForm should do a setState. I assume you have your form component to which can pass props like below. Since you are accessing the actual DOM element, in this case #upload, it can be done only with componentDidMount.

var PostList = React.createClass({
  getInitialState: function() {
    return {
      posts: []
    };
  },

  _handleSubmitSuccess: function(httpStatus, createdPost) {
    var that = this;
    that.setState({posts: (that.state.posts << createdPost)});
  },

  posts: function() {
    this.state.posts.map(function(post) {
      return (
        <div>
        ...
        </div>
      );
    });
  },

  render: function() {
    return (
      <div>
        {this.posts()}

        <br />

        <PostForm onSubmitSuccess={this._handleSubmitSuccess} />
      </div>
    );
  }
});


var PostForm = React.createClass({
  componentDidMount: function() {
    var that = this;

    $('#upload').ajaxForm({
      success: that.props.onSubmitSuccess
    });
  },

  render: function() {
    return (
      <form id="#upload">
      ...
      </form>
    );
  }
});

Hope you get the idea.