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

}