父组件对多个子组件输入作出反应。

Question

我有点困惑如何建立我的反应/流量(flummox)应用程序的一个好的和可理解的方式。

我有一个名为StrategyList的父组件，它显示了一个可过滤的“策略”列表。这些策略存储在StrategyStore (Flux)中。现在，我的StrategyList还有一个可重用的子组件ListFilter，它呈现一个下拉列表以选择一个类别，以及一个用于筛选列表的搜索框。

因为我的ListFilter是可重用的，所以我向它传递了两个回调：

<ListFilter
  onSearchQueryChange={this._handleSearchQueryChanged.bind(this)}
  onCategoryChange={this._handleCategoryFilterChanged.bind(this)}
  ...
/>

现在，如果任何筛选值发生了更改(类别或搜索查询)，我希望调用父StrategyList组件上的通量操作，以便从API获取新的列表项。

在每个示例中，它们都有一个带有回调的子组件，然后父组件执行如下操作：

_handleSearchQueryChanged(searchQuery) {
  this.props.flux.getActions('strategyActions').fetchData(searchQuery);
}

看上去不错，就像那样工作。但是..。如果我获取数据，我需要同时发送类别和搜索查询！我不能只依赖回调参数。我只能通过两个特定的onChange回调获得数据，我需要将值存储在父组件的某个地方，对吗？

我现在感到困惑的是我是否应该：

StrategyList**component's状态下的1.存储类别& searchQuery？**

_handleSearchQueryChanged(searchQuery) {
  this.setState({
    searchQuery: searchQuery
  };

  this.props.flux.getActions('strategyActions').fetchData(
    this.state.category, 
    this.state.searchQuery);
}

// Same for category...

• 当我这样做时，操作似乎永远得不到实际的状态数据，但总是落后一步(因为setState不是同步的吗？)

2.商店类别& searchQuery in my store?

为此，我将在回调中调用一个Flux操作来保存输入字段中的数据。

_handleSearchQueryChanged(searchQuery) {
  this.props.flux.getActions('strategyActions').setSearchQuery(searchQuery);
}
_handleCategoryFilterChanged(category) {
  this.props.flux.getActions('strategyActions').setCategory(category);
}

但是在这种情况下，我实际上在哪里调用fetch操作？在什么时候，我知道这两个值中的任何一个已经更改，并且我需要启动数据加载？此外，创建操作似乎是不必要的开销，只是为了将值保存到应用程序范围内的存储区，而这些值从未在应用程序范围内使用。

3.在别的地方？背景？ReactLink？如何访问这些值？

I不能通过访问子元素，因为下拉列表至少是一个更高级别的组件(Material)，没有引用，但是只有一个回调(它由div组成，而不是选择字段)。

谢谢你的帮助。

罗伯特

Answer 1

由于我一直在使用Flux模式，所以我发现更有用的方法是使用操作来改变存储中的数据，而在存储区不需要更改任何东西来响应我的请求时，不要使用操作。

如果我确实想更新商店，我会发送一个包含updaye的操作。商店听取相关行动，并更新自己。然后，当数据发生变化时，我的存储将发出更改事件，我可以在连接到这些存储的组件中侦听这些事件。但是，当仅仅是从商店获取数据的时候(或者是为了响应这些事件中的一个事件，告诉我商店的数据已经改变了，或者其他任何时候我需要新的数据)，我就使用MyStore.getTheData(category, filterText)。

对于您的情况，我建议将类别和filterText存储在StrategyList状态中，并在StrategyStore中实现一个数据获取器函数，以将数据返回给您，并按您希望看到的方式进行筛选。