Meteor-React用提交模式刪除帖子（帖子未定義）

Question

我已經創建了額外的提交模式，以便在他決定從收藏中刪除帖子後收到用戶確認，我無法弄清楚如何定位帖子。

，我想問你的是生產力問題的另一件事，是明智插入DeletePost成分引入每個post組件或者是有辦法把它插入當前是組件內部，不知怎麼的模態調用綁定到帖子。

這裏是DeletePost組件的代碼：

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

這裏是爲Post組件代碼從DeletePost進口：

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

你必須從它的父母后的值傳遞給子女：

您的PostsList類需要將post值傳遞給child。

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

Your DeletePost使用this.props.post從父級訪問數據。

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