投稿をモーダルで投稿削除（投稿未定義）

Question

コレクションから投稿を削除することを決定した後、ユーザーの確認を受け取るために追加の提出モーダルを作成しました。

もう1つのことは生産性に関する質問です。DeletePostコンポーネントを各postコンポーネントに挿入することをお勧めします。または、現在のコンポーネント内に挿入して何らかの形でモーダルコールをバインドする方法があります役職。あなたがその親からポスト値を渡す必要が

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

：

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

そして、ここではDeletePostからの輸入Postコンポーネントのコードです：ここで

はDeletePostコンポーネントのコードです子：

あなたのPostsListクラスは、ポスト値を子に渡す必要があります。

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

あなたの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> 
    ); 
    } 
}