i playing around react , rails , working on function submit post server, works intended, re-renders dom elements without refreshing page.
i aware missing function new json object , map on dom again unsure how formulate this.
from research, have new $.ajax request on '/posts' route, set json render pulling posts.
my code below:
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> ) } }) and other react file:
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>; } }) any appreciated. thank you.
the reactjs introductory tutorial has same functionality explained in great detail.
i'd direct @ here. , here's section directly want. posting comment server , re-rendering client. , shows how optimistically render new comment in ui.
update: here how can it. comments place add hooks server call.
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 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 server here , set state if successful this.setstate({posts: posts}); }, componentdidmount: function() { //load there server here //and keep reloading 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); and here's jsbin this. https://jsbin.com/pokoja/edit?html,js,output
Comments
Post a Comment