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

Question

我有点困惑如何以一种友好且易于理解的方式构建ui我的 react/flux (flummox) 应用程序。

我有一个名为 StrategyList 的父组件，它显示 "strategies" 的可过滤列表。这些策略存储在 StrategyStore (Flux) 中。现在我的 StrategyList 也有一个可重复使用的子组件 ListFilter，它呈现一个下拉菜单以选择类别和一个搜索框以过滤列表。

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

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

现在，如果任何过滤器值发生变化（无论是类别还是搜索查询，我想在我的父 StrategyList 组件上调用 flux 操作以从 API.

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

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

看起来不错，而且效果很好。但是...如果我获取数据，我需要同时发送类别和搜索查询！我不能只依赖回调参数。我只能通过两个特定的 onChange 回调获取数据，我需要将值存储在父组件中的某个位置，对吗？

我现在很困惑是否应该：

1.在我的 StrategyList 组件状态中存储类别和搜索查询？

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

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

// Same for category...

当我这样做时，动作似乎永远不会获取实际状态数据，但总是落后一步（因为 setState 不是同步的？）

2。在我的商店中存储类别和搜索查询？

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

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

但在这种情况下，我实际上在哪里调用提取操作？什么时候我知道两个值中的任何一个已经改变并且我需要触发数据加载？此外，仅创建操作以将值保存到从未使用过的应用程序范围的存储中似乎是不必要的开销。

3。别的地方？语境？反应链接？我如何访问这些值？

我不能通过this.refs.*访问子元素，因为至少Drop-Down是一个更高级别的组件（material-ui) 没有引用，只有一个回调（它由 div 组成，而不是 select-field）。

感谢您的帮助。

罗伯特

Answer 1

由于我一直在使用 Flux 模式，我发现使用操作来改变商店中的数据以及在商店不需要更改任何内容来响应我的请求时不使用操作更有用.

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

对于您的情况，我建议在 StrategyList 状态中存储类别和 filterText，并在 StrategyStore 中实现一个数据 getter 函数，以便 return 向您提供数据，根据您的需要进行过滤看见了。

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

Parent Component react to multiple children component inputs

callback

parent-child

flux

reactjs

reactjs-flux