Meteor-React删除带有提交模式的帖子(未定义帖子)

Question

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

我想问你的另一件事是一个生产力问题，将DeletePost组件插入到每个post组件中是明智的，还是有一种方法可以将它插入到currentPage组件中，并以某种方式将模式调用绑定到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>
    );
  }
}

下面是从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

您必须将post值从父级传递到子级：

您的PostsList类需要将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 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>
    );
  }
}