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管理數據

回答

相關問題