React + Meteor + Bootstrap Modal管理数据

我有一个流星应用程序和React，其中我有一个名为ChatManager的组件。该组件导入我的chatrooms.js API以发布我的chatrooms集合。它还会导入我的EditChatRoom组件和我的ChatRoomRecord组件。React + Meteor + Bootstrap Modal管理数据

基本上这里是相关的代码文件结构的摘要：

-imports 
    -api 
    -chatrooms.js 
    -ui 
    -chatmanager 
     -ChatRoomRecord.jsx 
     -EditChatRoom.jsx 
    ChatManager.jsx

我ChatRoomRecord组件有一个onClick功能，在记录的点击和chatroom道具成功的作品。

我EditChatRoom是modal其中id="editChatRoomModal"

的ChatManager部件是保持两个ChatRoomRecord和EditChatRoom组件之一。

如何将chatroom道具发送到EditChatRoom组件？并且在旁注中，我如何使用React打开editChatRoomModal？

非常感谢帮助！谢谢！

编辑：添加的信息

这里是我的ChatManager组件的基本表示：

class ChatManager extends Component { 
    renderChatRoomRecords() { 
     return this.props.chatrooms.map((chatroom) => (
      <ChatRoomRecord key={chatrooom._id} chatroom={chatroom} /> 
     )) 
    } 

    render() { 
     return (
      <div> 
       <EditChatRoom /> 
       <table> 
        <tbody> 
         {this.renderChatRoomRecords()} 
        </tbody> 
       </table> 
      </div> 
     ) 
    } 
} 

ChatManager.PropTypes = { 
    chatrooms: PropTypes.array.isRequired 
} 

export default createContainer(() => { 
    Meteor.subscribe('chatrooms') 
    return { chatrooms: ChatRooms.find({}).fetch() } 
}, ChatManager)

那么这里就是我ChatRoomRecord组件：

export class ChatRoomRecord extends Component { 
    constructor(props) { 
     super(props) 
     this.handleClick = this.handleClick.bind(this) 
    } 

    handleClick(event) { 
     event.preventDefault() 
     console.log("Click registered successfully: " + this.props.chatroom._id) 
    } 

    render() { 
     return (
      <tr onClick{this.handleClick}> 
       {/* This code isn't relevant to the problem */} 
      </tr> 
     ) 
    } 
} 

ChatRoomRecord.PropTypes = { 
    chatroom: PropTypes.object.isRequired 
}

这工作巨星所以在映射中没有问题点击事件在注册点击的地方起作用，并显示被点击的chatroom._id。

这里是我的EditChatRoom组件：

export class EditChatRoom extends Component { 
    render() { 
     return (
      <div className="modal fade" id="editChatRoomModal" tabIndex="-1" role="dialog"> 
       {/* This code isn't relevant to the problem */} 
      </div> 
     ) 
    } 
}

我需要打开这个模式，并通过被点击我ChatRoomRecord组件的chatroom。

希望这能更好的解释这个问题。

来源

2017-01-03 Barry Michael Doyle

您可以将它作为会话变量存储吗？然后用Session.get（）获取它。否则，还原。 –

Oooooh，是的，这是一个好主意，没有想到这一点。这有助于数据方面的事情，现在我需要弄清楚在打开模式时应该怎么做。 –

这给了我一个尝试使用URL参数管理它的想法。所以我会尽量使用这些。 –

你可以简单地使用Session显示选定的记录和模态的状态（显示或者隐藏）：

ChatRoomRecord.jsx

export class ChatRoomRecord extends Component { 
    // ... 

    handleClick(event) { 
     event.preventDefault() 
     Session.set('selectedRecordId', this.props.chatroom._id); 
     Session.set('isShowModal', true); 
    } 

    // ... 
}

EditChatRoom.jsx

class EditChatRoom extends Component { 
    render() { 
    const { 
     selectedRecordId 
    } = this.props; 

    return (
     <div className="modal fade" id="editChatRoomModal" tabIndex="-1" role="dialog"> 
     {/* use the selectedRecordId */} 
     </div> 
    ) 
    } 
} 

export default createContainer(() => { 

    // show modal if isShowModal is true 
    if (Session.get('isShowModal')) { 
    $('#editChatRoomModal').show(); 
    } else { 
    $('#editChatRoomModal').hide(); 
    } 

    return { 
    selectedRecordId: Session.get('selectedRecordId'), 
    }; 
}, EditChatRoom)

这段代码虽然只是为了演示如何解决你的问题。我建议你使用react-bootstrap而不是正常的Bootstrap。并且使用另一个反应性来源（ReactiveVar或ReactiveDict）来存储反应值而不是Session，因为Session具有全局范围，所以很容易搞砸

来源

2017-01-03 13:19:39 Khang

谢谢！我真的很感激与此同时出现的其他建议:) –

React + Meteor + Bootstrap Modal管理数据

回答

相关问题