使用Reactjs按日期过滤表格数据

Question

我是新手，并试图实施以下想法 -

• 数据表，其中数据可按月中的某天过滤。

• 日历中仅显示连续一个月的日期（分页/标签视图）：

  

• 选择每天将过滤页面上的表格数据

• 可以通过点击行末显示的月份名称来选择下个月，并相应地过滤数据。

我尝试了什么 -

• 使用react-bootstrap paginator
• 使用数据表

我发现很难确定如何实现日历并将其作为过滤器与数据表连接。顺便说一句，表的数据可以从任何数据库或一些示例数据中找到。

我希望我尽可能清楚。随意告诉我是否需要添加一些东西。

Answer 1

你可以做2个几个组件，例如Filters和Data，首先会存储你的可能日期和月份列表，用户选择它会调用一些函数，这将改变道具组件Data以及ShouldComponentUpdate Data中您可以检查过滤器已更改或未更改，并按过滤器对日期进行排序。

This是一个很好的答案，例如，它如何在反应中实现，但它也更容易使用Redux。

希望得到这个帮助。

UPD：举个例子：

您可以将日历创建为空html。过滤示例：

为父级

class CalendarContainer extends React.Component {
  construnctor(props) {
    super(props)
    this.state = { 
       dataObjects = [..],
       datefilter = null
    } 
  }

  ShouldComponentUpdate(newProps, newState) {
      return newState.filter != this.state.filter
  }

  handeUpdateFilter = (newFilter) => {
      this.setState({dateFiter : newFilter});
  }

  getFilteredDates = () => {
     return this.state.dataObjects.filter(x => x.date == this.state.dateFilter);
  }

  render () {
    return (
       <Filters filter={this.state.dateFilter}
          handeUpdateFilter = {this.chandeUpdateFilter}/>
       <DataTable dates={this.getFilteredDates()})
    }
}

在过滤器组件中，只需调用props.handeUpdateFilter(newFilter)

即可