反应，更新DOM元素上发布的数据提交而不刷新

我在玩React和Rails，我正在处理一个函数来提交一个帖子到服务器，它按预期工作，但然后重新呈现DOM元素不刷新页面。反应，更新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>; 
} 
})

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

来源

2016-08-08 Alex Jack

@alexjtark对我的回答有帮助吗？请告诉我。 – KumarM

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

来源

2016-08-09 02:13:42 KumarM

非常感谢你的支持，玩得更多，并将它分类。谢谢！ –

对库马尔的回答稍作修改，因为他的解决方案突变状态，并且对于不使用getInitialState函数的人可能很难。

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

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

在这种情况下，在状态柱的内容被复制（使用传播操作符）并分配到一个讯息恒定。然后将新数据推入常量中，然后将其设置为新状态（以及现有状态的复制内容）。

来源

2018-03-11 02:00:08 Nnanyielugo

反应，更新DOM元素上发布的数据提交而不刷新

回答

相关问题