如何使用Meteor React管理选择框（表示实体之间的关系）？

Question

我使用Meteor/React来构建社交应用程序。用户通过ManyToOne关系与其他人关联（用户有代表）。

所以我做了一个成员组件，它返回一个带有窗体的模板来选择代表，并创建一个API来执行用户的一些操作。

一切正常，但删除功能不会更新客户端（我打开另一个窗口与应用程序）。

我觉得我错过了与组件概念，该选择框应该是一个组件？

这里是Member.jsx

import React, { Component, PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 
import { Meteor } from 'meteor/meteor'; 

import { Members } from '../api/members.js'; 

// Member component - represents a single member item 
export default class Member extends Component { 
    componentDidMount() { 
    ReactDOM.findDOMNode(this.refs.select_representant).value = this.props.member.representant; 
    } 

    componentDidUpdate() { 
    ReactDOM.findDOMNode(this.refs.select_representant).value = this.props.member.representant; 
    } 

    setRepresentant() { 
    Meteor.call('members.setRepresentant', this.props.member._id, 'oo'); 
    } 

    deleteThisMember() { 
    Meteor.call('members.remove', this.props.member._id); 
    } 

    renderRepresentants() { 
    let representants = Members.find().fetch(); 
    return representants.map((representant) => (
     <option key={representant._id} value={representant._id}>{representant.pseudo}</option> 
    )); 
    } 

    handleSubmit(event) { 
    event.preventDefault(); 

    // Find the text field via the React ref 
    const representantId = ReactDOM.findDOMNode(this.refs.select_representant).value.trim(); 
    const representant = Members.findOne({ _id: representantId }); 

    Meteor.call('members.setRepresentant', this.props.member._id, representantId); 
    } 

    render() { 
    return (
     <div> 

     <h3 className="text"> 
      {this.props.member.pseudo} <button className="delete" onClick={this.deleteThisMember.bind(this)}>&times;</button> 
     </h3> 

     <form className="form-horizontal"> 
      <div className="form-group"> 
      <label htmlFor="select_representant" className="col-sm-3 control-label">Représentant</label> 
      <div className="col-sm-7"> 
       <select ref="select_representant" className="form-control custom-select" name="select_representant" onChange={this.handleSubmit.bind(this)}> 
       {this.renderRepresentants()} 
       </select> 
      </div> 
      </div> 
     </form> 

     </div> 
    ); 
    } 
} 

和members.jsx

import { Mongo } from 'meteor/mongo'; 
import { Meteor } from 'meteor/meteor'; 
import { check } from 'meteor/check'; 

export const Members = new Mongo.Collection('members'); 

Meteor.methods({ 
    'members.insert'(pseudo) { 
    check(pseudo, String); 

    Members.insert({ 
     pseudo 
    }); 
    }, 
    'members.remove'(memberId) { 
    check(memberId, String); 

    Members.remove(memberId); 
    represented = Members.find({ representant: memberId }).fetch(); 
    for(representedItem in represented){ 
     Members.update(representedItem, { $set: { representant: null } }); 
    } 
    }, 
    'members.setRepresentant'(memberId, representantId) { 
    check(memberId, String); 
    check(representantId, String); 

    Members.update(memberId, { $set: { representant: representantId } }); 
    }, 
}); 

Answer 1

试试这个：

deleteThisMember() { 
    Meteor.call('members.remove', this.props.member._id); 
    renderRepresentants(); 
} 

或者，你试图把在thie.props您的会员名单？

Answer 2

由于您在React渲染函数中查询Members，因此它不会与数据库中的更改发生反应。您需要使用createContainer从react-meteor-data看到您的前端的变化：

import { createContainer } from 'meteor/react-meteor-data'; 
... 
export default class Member extends Component { 
    ... 
    renderRepresentants() { 
    let representants = this.props.representants; 
    ... 
    } 
... 
} 

createContainer(() => { 
    return { 
    representants: Members.find().fetch() 
    }; 
}, Member); 

现在查询应适当被动当是Members集合中的变化进行更新。