Question

我有这个ajaxify表单，可以很好地提交数据，但是我想将这个ajax代码中的数据传递给React组件，以便在成功提交数据后更新视图。如何使用函数将一些数据传递给React？

使用下面的代码时，它为我提供了未识别的功能＆＃39;，如何让它可以访问ajax和React？

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

这是我使用的React代码：

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

Answer 1

您传递给ajaxForm的回调应该执行setState。我假设您的表单组件可以传递如下所示的道具。由于您正在访问实际的DOM元素，在本例中为#upload，因此只能使用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>
    );
  }
});

希望你明白这一点。

Ajax和React函数

1 个答案: