Question

我的搜索功能有两个组件，一个用于选择搜索过滤器，另一个用于执行搜索查询。每次选择过滤器时都会重新加载状态，因此我无法选择多个过滤器。有没有办法调用搜索组件并让我的searchfilter组件保持其状态？

在我的searchfilters组件中，我有这个：

let state = _.extend({}, this.state);
state.filters = this.toggleFilter(filterObj, state.filters);
this.setState(state);
this.props.searchWithFilters(state.filters);

在我的搜索组件中，我有：

<SearchFilters searchWithFilters={this.searchWithFilters.bind(this)} />

我有这个方法：

searchWithFilters(filters) {
let state = _.extend({}, this.state);
state.filters = filters;
this.setState(state);
this.props.search(this.state);
}

Answer 1

您每次只是覆盖过滤器，所以如果您需要跟踪以前的过滤器，我会将它们存储在一个数组中。

searchWithFilters(filters) {
    let state = _.extend({}, this.state);
    state.filters = [];
    state.filters.push(filters);
    this.setState(state);
    this.props.search(this.state);
    }

Answer 2

您只能使用SearchComponent的状态来存储过滤器，而不是使用状态SearchFilters。 toggleFilter方法也会在SearchComponent中，它也会将其作为道具发送（如果您总是将它们放在一起，也可以在searchWithFilters中执行）。最后，您必须将过滤器作为属性发送到SearchFilters组件。

 <SearchFilters filters={this.state.filters} 
searchWithFilters={this.searchWithFilters.bind(this)} />

然后，searchWithFilters只会收到新过滤器，并将其添加到SearchComponent的状态。它可能是这样的：

searchWithFilters(filterObj) {
   let state = _.extend({}, this.state);
   state.filters = [];
   state.filters.push(this.state.filters);
   state.filters.push(filterObj);
   this.setState(state);
   this.props.search(this.state);
}

您也可以将它们存储在redux中，这可能是一个不错的选择。

如何在调用其他组件后保持组件中的状态

2 个答案: