Question

我正在使用React和Rails，我正在开发一个函数来向服务器提交一个帖子，它按预期工作，但随后重新呈现DOM元素而不刷新页面。

我知道我错过了一个能够获得新JSON对象并再次将其映射到DOM上的函数，但我不确定如何正确地表达它。

从我的研究中，我将不得不在'/ posts'路线上做一个新的$ .ajax请求，该路由已经设置为JSON，仅渲染所有帖子。

我的代码如下：

var New = React.createClass ({

handleClick(e) {

e.preventDefault();

let text = this.refs.text.value;

$.ajax({
  url: '/new',
  type: 'POST',
  data: { post: { text: text} },
  success: (post) => {
    this.handleSubmit(post);
  }
});
},
handleSubmit(post) {
console.log(post);
this.refs.text.value = ""

},

render: function() {
    return( <div>
              <div className="post-div">
                <form>
                <input className="form-control" ref='text' placeholder='Post Something' />
                <button className="btn btn-primary" onClick={this.handleClick}>Submit</button>
                </form>
              </div>
            </div>

        )
  }
})

和另一个反应文件：

var Post = React.createClass ({

render: function() {
    return 
            <div className="text-box">
            <p className="text">{this.props.text}</p>
            <div className="text-stamps">{this.props.timestamps}</div>
            </div>;
 }
})

任何帮助将不胜感激。谢谢。

Answer 1

ReactJS入门教程具有完全相同的功能，详细说明。

我绝对会引导你去看它here。并here's直接做你想要的部分。将注释发布到服务器并将其重新呈现回客户端。它还展示了如何在UI中乐观地呈现新评论。

更新：您可以通过以下方式进行操作。注释是您将钩子添加到服务器调用的位置。

var posts = [
    {id: 1, text: "iPhone 7 release date"},
    {id: 2, text: "Samsung 7 release date"}
  ];

  var Post = React.createClass({
    render: function(){
      return (<p>{this.props.text}</p>);
    }
  });

  var PostList = React.createClass({
    render: function() {
      var response = this.props.posts.map(function(post){
        return (<Post text={post.text}></Post>);
      });
      return (<div>
        {response}
      </div>);
    }
  });

  var PostForm = React.createClass({
    getInitialState: function() {
      return {newPost: ""};
    },

    handleTextChange: function(e){
      this.setState({newPost: e.target.value});
    },

    onSubmit: function(e) {
      e.preventDefault();
      var newPost = this.state.newPost.trim();
      if(!newPost) {
        return ;
      }

      this.props.onAddition(newPost);

      this.setState({newPost: ""})
    },
    render: function() {
      return (
        <form onSubmit={this.onSubmit}>
          <h4>Add some post here</h4>
          <input type="text" value={this.state.newPost} onChange={this.handleTextChange}></input>
          <input type="submit" value="Add Post" />
        </form>
      );
    }
  });

  var Page = React.createClass({
    getInitialState: function() {
      return {posts: posts};
    },
    onAddition: function(newPost) {
      console.log("Adding new: ",newPost);
      posts.push({id: Date.now(), text:newPost});

      //POST to the server here and set the state if successful
      this.setState({posts: posts});
    },
    componentDidMount: function() {
      //Load from there server here
      //And keep reloading it from the server every few seconds
    },
    render: function() {
      return (
        <div>
          <PostForm onAddition={this.onAddition}/>
          <PostList posts={this.state.posts}/>
        </div>
      );
    }
  });

  var div = document.getElementById("app");
  ReactDOM.render(<Page/>, div);

这里有一个JSBin。 https://jsbin.com/pokoja/edit?html,js,output

Answer 2

稍微修改了Kumar的答案，因为他的解决方案会改变状态，对于不使用getInitialState函数的人来说可能很难。

onAddition = (newPost) => {
const posts = [...this.state.posts]
posts.push({
  _id: Date.now,
  text: newPost.post
})

this.setState({
  posts: posts,
  postForm: {
    post: ''
  }
})}

在这种情况下，状态中的帖子内容被复制（使用传播运算符）并分配给帖子常量。然后将新数据推入常量，然后将其设置为新状态（以及现有状态的复制内容）。

在发布的数据上进行React，更新DOM元素而不刷新

2 个答案: