React + Meteor + Bootstrapモーダル管理データ

Question

私はChatManagerというコンポーネントを持つReactのMeteorアプリケーションを持っています。このコンポーネントは、chatroomsコレクションを公開するために私のchatrooms.js APIをインポートします。 EditChatRoomコンポーネントとChatRoomRecordコンポーネントもインポートされます。

は、基本的には、ここで関連するコードのファイル構造の概要です：

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

私ChatRoomRecordコンポーネントは、クリックしてchatroom小道具をログに成功した作品onClick機能を持っています。

マイEditChatRoomはid="editChatRoomModal"

ChatManager成分はChatRoomRecordとEditChatRoom成分の両方を保持するものであるmodalあります。

登録した小道具を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を示します。私はこのモーダルを開き、私のChatRoomRecordコンポーネントでクリックされたchatroomを通過する必要が

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> 
     ) 
    } 
} 

：

は、ここに私のEditChatRoomコンポーネントです。

これがこの問題をより詳しく説明してくれることを期待しています。

Answer 1

あなたは、単に選択したレコードやモーダル（表示または非表示）の状態を表示するために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を使用することをお勧めします。セッションの代わりに反応性の値を保存するには、別の反応源（ReactiveVarまたはReactiveDict）を使用してください。