Meteor-React löschen Post mit submit modal (Post nicht definiert)

Question

Ich habe zusätzliche submit modal erstellt, um Benutzerbestätigung zu erhalten, nachdem er beschließt, den Beitrag aus der Sammlung zu löschen, und ich kann nicht herausfinden, wie Sie den Beitrag ausrichten. Eine andere Sache, die ich Ihnen gerne stellen möchte, ist eine Produktivitätsfrage, ist es ratsam, DeletePost Komponente in jede post Komponente einzufügen oder gibt es eine Möglichkeit, sie innerhalb der currentPage Komponente einzufügen und irgendwie den modalen Aufruf an die zu binden Post. Hier

ist der Code für DeletePost Komponente:

class DeletePost extends Component { 

    handleDelete(event) { 
    event.preventDefault(); 
    Meteor.call('posts.remove', post); 
    $('#modalDelete').modal('hide'); 
    } 

    render() { 
    return (
     <div className="modal fade form-delete" id="modalDelete" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div className="form-outer"> 
      <form id='delete_post' onSubmit={this.handleDelete.bind(this)}> 
       <div className='form-text form-header'> 
        <p>My dear, <strong>master</strong></p> 
        <p>Are you really sure about that?</p> 
       </div> 
       <button type="button" className="form-button button-delete" data-dismiss="modal">No</button> 
       <button type="sumbit" className="form-button button-delete">Yes</button> 
      </form> 
      </div> 
     </div> 
    ); 
    } 
} 

Und hier ist der Code für die Post Komponente, die aus DeletePost importiert:

class PostsList extends Component { 

    renderData(){ 
    return this.props.posts.map(post => { 
     const {title, social, link, link_image, time=moment(post.createdAt).fromNow()} = post; 
     return (
     <div key={post._id} className='social-post'> 
      <img src={link_image}></img> 
      <p>{social}, {time}</p> 
      <a className='social-link' target="_blank" href={link}>{title}</a> 
      <div className='list-buttons'> 
      <button className='form-button button-gradient'>Edit</button> 
      <button type="button" className='form-button button-gradient' data-toggle="modal" data-target="#modalDelete">Delete</button> 
      </div> 

      <DeletePost /> 
     </div> 
    ); 
    }) 
    } 

    render() { 
    return (
     <div className='flex-timeline'> 
     {this.renderData()} 
     </div> 
    ); 
    } 
} 

Answer 1

Sie haben die Post Wert von seinen Eltern zu übergeben Kind:

Ihre PostsList-Klasse muss Postwert an Kind übergeben.

class PostsList extends Component { 
    renderData(){ 
    return this.props.posts.map(post => { 
     const {title, social, link, link_image, time=moment(post.createdAt).fromNow()} = post; 
     return (
     <div key={post._id} className='social-post'> 
      <img src={link_image}></img> 
      <p>{social}, {time}</p> 
      <a className='social-link' target="_blank" href={link}>{title}</a> 
      <div className='list-buttons'> 
      <button className='form-button button-gradient'>Edit</button> 
      <button type="button" className='form-button button-gradient' data-toggle="modal" data-target="#modalDelete">Delete</button> 
      </div> 

      <DeletePost post={post}/> 
     </div> 
    ); 
    }) 
    } 

    render() { 
    return (
     <div className='flex-timeline'> 
     {this.renderData()} 
     </div> 
    ); 
    } 
} 

Ihre DeletePost verwenden this.props.post, um auf Daten von Parent zuzugreifen.

class DeletePost extends Component { 

    handleDelete(event) { 
    event.preventDefault(); 
    Meteor.call('posts.remove', this.props.post); 
    $('#modalDelete').modal('hide'); 
    } 

    render() { 
    return (
     <div className="modal fade form-delete" id="modalDelete" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div className="form-outer"> 
      <form id='delete_post' onSubmit={this.handleDelete.bind(this)}> 
       <div className='form-text form-header'> 
        <p>My dear, <strong>master</strong></p> 
        <p>Are you really sure about that?</p> 
       </div> 
       <button type="button" className="form-button button-delete" data-dismiss="modal">No</button> 
       <button type="sumbit" className="form-button button-delete">Yes</button> 
      </form> 
      </div> 
     </div> 
    ); 
    } 
}