使用 Reactjs 按日期过滤表数据答案

【问题标题】：Filter table data by date with Reactjs使用 Reactjs 按日期过滤表数据
【发布时间】：2017-01-31 05:15:32
【问题描述】：

我是 reactJs 新手，正在尝试实现以下想法 -

一个数据表，可以在其中按日期过滤数据。
一个仅连续显示一个月中几天的日历（分页/标签式视图）：
选择每一天会过滤页面上表格的数据
可以通过点击行尾出现的月份名称来选择下个月，并相应地过滤数据。

我尝试过的-

使用 react-bootstrap 分页器
使用数据表

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

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

【问题讨论】：

标签： reactjs filter datatable calendar

【解决方案1】：

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

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)

【讨论】：

感谢您的回答。现在我有单独的分页（我想作为日历重用，因为我想要 1 行日历）和表格组件，并且可以将过滤器作为单独的组件，据我所知。或者可以在日历中编写过滤功能，以便在点击日期时，表格中的数据会根据它进行过滤。但首先我需要在一行中实现日历，并且类似于我之前给出的图像。我怎样才能做到这一点？