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中进行管理。简单地说，您可以更改从父级gateway设置PairSelector的state属性的值，并在GatewaySelector中更改网关时更改state。

Redux建议将反应状态用于对全局app无关的状态。有关详细信息，请阅读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>
    );
  }

}

React / redux子更新子项（<select> update </select>）

1 个答案: