时间戳

首页 > 解决方案 > 如何进行多重过滤？

reactjs - 如何进行多重过滤？

问题描述

我正在研究基于类别的过滤器。对于单个类别它正在工作，但我如何为多个类别选择实现它？

示例：如果用户点击“服装”和“运动”，他应该能够看到这两个类别的列表。

Redux state:

categories
>0 :{id:999 , name:'All', slug:'all'}
>1 :{id:2 , name:'clothing', slug:'clothing'}
>2 :{id:1 , name:'sport', slug:'sport'}

class ListFilter extends React.Component {


    changeFilter = (category) => { 
        this.props.changeFilter(category, this.props.text);
        gaEvent("Home - ListFilter", category, this.props.text);  
    };

    clearFilters = () => {
        this.props.changeFilter('all', '');
        gaEvent("Home - ListFilter", "Reset");
    };

    
    render() {  
        return (
            <>
                <div className={classNames({
                    "search_list__filters": true,
                    "search_list--show": this.props.search
                })}>
                    
                    {this.props.categories.map((category, index) => {
                        return (
                           
                            <Form.Group key={index} className="search_filters" >
                                    <Form.Check  onClick={(event)=>(event.target.checked!==true)?this.clearFilters():this.changeFilter(category.slug)} custom inline label={category.name} className='search_list__btn' type='checkbox' id={category.name}  />
                            </Form.Group>

                        )
                    })}
                   
               
                <Row className="search_list_btn search_list__clear ">
                        <Col className="clear_wrapper">
                            {this.props.filters &&
                             <button className="clear_btn" onClick={this.clearFilters} >
                                Clear all filters
                            </button>
                            }
                        </Col>
                    </Row>
                    </div>
            </>
        );
    }
}

const mapStateToProps = state => {
        return state.Store
    }
;

const mapDispatchToProps = dispatch => ({
    changeFilter: (category, text) => dispatch(changeFilter(category, text))
});

export default connect(mapStateToProps, mapDispatchToProps)(ListFilter);

标签： reactjs

解决方案

目前，您正在changeFilter用单一类别调度事件。您可以将过滤器存储在其中State并使用类别数组分派事件。请参阅CodeSandbox以了解如何使用多个类别过滤器。

 class ListFilter extends React.Component {
     constructor(props) {
     super(props);

    this.state = {
      filters: []
    };
   }

  changeFilter = category => {
    const { filters } = this.state;
    const updatedFilter = [...filters, category];
    this.setState({
      filters: updatedFilter
    });

    this.props.changeFilter(updatedFilter, "testText");
  };
  render() {
    console.log(this.state.filters);
    return (
      <div className="App">
        {categories.map((category, index) => {
          return (
            <Form.Group key={index} className="search_filters">
              <Form.Check
                onClick={event =>
                  event.target.checked !== true
                    ? this.clearFilters()
                    : this.changeFilter(category.slug)
                }
                custom
                inline
                label={category.name}
                className="search_list__btn"
                type="checkbox"
                id={category.name}
              />
            </Form.Group>
          );
        })}
      </div>
    );
  }
}

推荐阅读