コンポーネントの状態を別のコンポーネントから操作できる方法はありますか？

Question

私は相互に関連する4つのコンポーネントのエコシステムを持っています。異なるコンポーネントから1つのコンポーネントの状態を操作できれば非常に役に立ちます。

は、これは私の中央部コンポーネントです：

import React, {Component} from 'react'; 
import {render} from 'react-dom'; 
import $ from 'jquery'; 
import List from './List'; 
import OpenSessionCard from './OpenSessionCard'; 

class MidSection extends Component { 
    constructor() { 
    super(...arguments); 
    this.state = { 
     cardsToBeDisplayed: this.props.sessionCards, 
     cardsFilter: 'All', 
     cardExpanded: false, 
     cardToBeDisplayed: null 
    }; 
    } 

    filterCards() { 
    let selectedValue = $('#cards-filter').val(); 
    if (selectedValue === 'All') { 
     this.setState({ 
     cardsToBeDisplayed: this.props.sessionCards, 
     cardsFilter: 'All', 
     cardExpanded: false, 
     cardToBeDisplayed: null 
     }); 
    } else { 
     this.setState({ 
     cardsToBeDisplayed: this.props.sessionCards.filter((sessionCard) => sessionCard.status === selectedValue), 
     cardsFilter: selectedValue, 
     cardExpanded: false, 
     cardToBeDisplayed: null 
     }); 
    } 
    } 

    render() { 
    let cardList, openSessionCard; 

    if (!this.state.cardToBeDisplayed) { 
     cardList = (
     <List cards={this.state.cardsToBeDisplayed} filter={this.state.cardsFilter}/> 
    ); 
    } else { 
     openSessionCard = (
     <OpenSessionCard card={this.state.cardToBeDisplayed}/> 
    ); 
    }; 

    return (
     <section className="col-md-8 col-sm-12 col-xs-12 middle-section-container"> 
      <div className="nav-justified pull-left"> 
       <div className="gray-background-color col-xs-12 form-control-static"> 
        <div className="col-xs-6"> 
         <label className="control-label green-color" htmlFor="inputError1">MY SESSIONS</label> 
        </div> 
        <div className="col-xs-2 col-xs-offset-4 text-right"> 
         <select id="cards-filter" className="form-control" onChange={this.filterCards.bind(this)}> 
         <option>All</option> 
         <option>Open</option> 
         <option>Scheduled</option> 
         <option>Completed</option> 
         <option>Closed</option> 
         </select> 
        </div> 
       </div> 
       {cardList} 
       {openSessionCard} 
      </div> 
     </section> 
    ); 
    } 

    componentDidMount() { 
    $('#mid-section').attr('data-rendered', 'true'); 
    } 
} 

export default MidSection; 

そして、これは私のSessionCardコンポーネントである：私はのSETSTATE（）関数を呼び出すためにSessionCardコンポーネントでopenCard（）関数をしたい

import React, {Component} from 'react'; 
import {render} from 'react-dom'; 
import $ from 'jquery'; 
import MidSection from './MidSection'; 

class SessionCard extends Component { 
    openCard() { 
    /************* 
    MidSection.setState({ 
     cardsToBeDisplayed: null, 
     cardsFilter: null, 
     cardExpanded: true, 
     cardToBeDisplayed: this 
    }); 
    **************/ 
    $('#cards-filter').attr('disabled', 'disabled'); 
    } 

    render() { 
    return (
     <div className="card" onClick={this.openCard.bind(this)}> 
     <div className="card__title green-color">{this.props.name}</div> 
     <div className="card__details"> 
      <span>Facilitator: {this.props.facilitator}</span><br/> 
      <span>Mode: {this.props.mode}</span><br/> 
      <span>Status: {this.props.status}</span><br/> 
     </div> 
     </div> 
    ); 
    } 
} 

export default SessionCard; 

MidSectionコンポーネント私はこれを達成する方法はありますか？ SessionCardコンポーネントからMidSectionコンポーネント（現在の状態）を参照するにはどうすればよいですか？

Answer 1

メイン（親）コンポーネントからのみ状態を設定する必要があります。すべての子コンポーネントは "ダム"コンポーネントでなければなりません。

<OpenSessionCard card={this.state.cardToBeDisplayed} setStateFunc={this.setStateFunc}/> 

そしてあなたopenCard（）関数呼び出しで：

this.props.setStateFunc(); 

これは、親コンポーネントで関数を呼び出しますし、あなたのようSessionCardの小道具として呼び出すために欠けている機能に渡しますそこから州を操作することができます。

Answer 2

ありがとうございます@ erichardson30！あなたのソリューションは完全には十分ではありませんでしたが、それは私を正しい軌道に導いてくれました。 setState（）関数を小道具として渡すと、コンテキストなしで関数を渡すだけです（読み込み：呼び出されるはずのコンポーネント）。そこで、MidSectionコンポーネント自体の参照を小道具として渡してから、openCard（）関数で、その小道具のコンポーネントのsetState（）関数を呼び出しました。

<OpenSessionCard card={this.state.cardToBeDisplayed} midSectionComponent={this}/> 

そして、私のopenCard（）関数の中で：

let midSectionComponent = this.props.midSectionComponent; 
midSectionComponent.setState({ 
    cardsToBeDisplayed: null, 
    cardsFilter: null, 
    cardExpanded: true, 
    cardToBeDisplayed: this 
}); 

それはまさに私がそれを望んだ道を働いている私の中央部コンポーネントで

。再度、感謝します！ :)