使用选定的复选框过滤Json对象的数组-React

Question

我是新来的反应者。我有一个Json Objects数组，我想根据选中的复选框过滤该数组。我有多个基于城市，语言和主题的复选框。请参考下面的屏幕截图

这是我上面显示的页面的代码。如何实现此功能？我希望，如果有人选择了一个复选框，那么数据将被过滤，如果取消选择，那么数据也将被重新呈现。 我该如何实现？

  tasks:
    - set_fact:
        my_db: "{{ my_db + [ item.0|combine(item.1) ] }}"
      loop: "{{ lookup('subelements',databases,'users') }}"

Answer 1

您可以为每个复选框使用状态，例如主题，城市和语言，然后在每个复选框的处理程序中设置状态。然后，您可以过滤数据数组以显示过滤后的数据，例如

const { topic, city, language } = this.state;
// assuming data is array and all the filter values are not empty.
// If empty no need for filter
const filteredData = data.filter(val => {
return (topic.length && topic.includes(val.topic)) ||
(city.length && city.includes(val.city)) ||
(language.length && language.includes(val.language))
}