Meteor-React 删除带有提交模式的帖子（帖子未定义）答案

【问题标题】：Meteor-React delete post with submit modal (post not defined)Meteor-React 删除带有提交模式的帖子（帖子未定义）
【发布时间】：2016-07-26 22:52:23
【问题描述】：

我创建了额外的提交模式，以便在用户决定从收藏中删除帖子后接收用户确认，但我不知道如何定位帖子。

我想问你的另一件事是生产力问题，将DeletePost 组件插入每个post 组件是否明智，或者有办法将其插入 currentPage 组件并以某种方式绑定模态调用到帖子。

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

这是从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>
    );
  }
}

【问题讨论】：

标签： javascript mongodb meteor reactjs

【解决方案1】：

您必须将帖子值从其父母传递给孩子：

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

【讨论】：