React/redux兒童更新子（<select>更新<select>）

Question

我有容器，綁定connect（）到我的商店。

// GetActiveAccount.jsx 
const VisibleActiveAccountsList = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(ActiveAccountsSelector) 

ActiveAccountsSelector是演示組件。這裏面表象的成分我加載兩個子表象成分這只是

//activeAccountSelector render method 
    return(
      <div> 
        <GatewaySelector gateways={gateways} onSelectGateway={ (e) => { 
          console.log(e.target.value); 
         } 
        }/> 
        <PairSelector gateway={gateways[0]} onSelectPair={ (e) => { 
          console.log(e.target.value); 
         } 
        }/> 

      </div> 
     ) 

我要的是，在gatewaySelector選定值確定傳遞給PairSelector價值和改變時更新。

什麼是正確的方法來做到這一點？對於簡單的選擇更改更新，執行操作似乎有點矯枉過正。

我想我必須在父級（activeAccountSelector）管理，但如何？似乎不建議改變狀態而不經過整個過程（行動，減速器等），我應該改變父母的道具嗎？

Answer 1

是的。您必須在父組件的state中進行管理。簡單地說，您可以更改從Parent的state中設置PairSelector的gateway屬性的值，並在GatewaySelector中更改網關時更改state。

Redux建議將反應狀態用於與全局應用無關的狀態。請閱讀Redux作者的comment以獲取更多信息。

class ActiveAccountSelector extends React.Component{ 

    contructor(props){ 
    super(props); 
    this.state = { selectedGateway: null}; 
    this.onSelectGateway = this.onSelectGateway.bind(this); 
    } 

    onSelectGateway(e){ 
    this.setState({ selectedGateway: e.target.value }); 
    } 

    render(){} 
    .... 
    return(
     <div> 
     <form> 
      <GatewaySelector gateways={gateways} onSelectGateway={ this.onSelectGateway} 
      }/> 
      <PairSelector gateway={this.state.selectedGateway} onSelectPair={ (e) => { 
      console.log(e.target.value); 
      }}/> 
      </form> 
     </div> 
    ); 
    } 

}