Reagieren, aktualisieren Sie DOM-Elemente auf submit auf geposteten Daten ohne Aktualisierung

Question

Ich spiele mit React und Rails und ich arbeite an einer Funktion, um einen Beitrag an den Server zu senden, der wie vorgesehen funktioniert, aber dann das DOM erneut rendert Elemente ohne die Seite zu aktualisieren.

Ich bin mir bewusst, dass ich eine Funktion vermisse, die das neue JSON-Objekt bekommen würde und es wieder über das DOM abbilden würde, aber ich bin nicht sicher, wie ich das richtig formulieren soll.

Aus meinen Nachforschungen müsste ich eine neue $ .ajax Anfrage auf der '/ posts' Route machen, die bereits als JSON eingerichtet wurde, nur das Rendern aller Beiträge.

Mein Code ist unten:

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> 

     ) 
    } 
}) 

und die andere reagieren Datei:

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>; 
} 
}) 

Jede Hilfe würde geschätzt. Vielen Dank.

Answer 1

Das ReactJS Einführungs-Tutorial hat genau die gleiche Funktionalität, die sehr detailliert erklärt wird.

Ich würde Sie auf jeden Fall darauf hinweisen, here. Und here's der Abschnitt, der direkt was Sie wollen. Einen Kommentar zum Server senden und ihn erneut auf den Client rendern. Und es zeigt auch, wie man den neuen Kommentar in der Benutzeroberfläche optimistisch darstellt.

Update: Hier ist, wie Sie es tun können. Die Kommentare sind der Ort, an dem Sie dem Serveraufruf Hooks hinzufügen.

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); 

Und hier ist ein JSBin für diese. https://jsbin.com/pokoja/edit?html,js,output

Answer 2

Eine kleine Änderung an Kumars Antwort, da seine Lösung den Status verändert und für Personen, die die getInitialState-Funktion nicht verwenden, schwierig sein könnte.

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

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

In diesem Fall werden die Inhalte der Stellen im Zustand kopiert (unter Verwendung der Spread-Operator) und die Konstante in einen Pfosten zugeordnet. Dann werden die neuen Daten in die Konstante geschoben, die dann (zusammen mit den kopierten Inhalten des bestehenden Zustands) als neuer Zustand gesetzt wird.