使用 Reactjs 按日期過濾表格數據

Question

我是 reactJs 的新手並試圖實現以下想法 -

• 一個數據表，其中的數據可以按月中的哪一天過濾。

• 一個日歷，它只會連續顯示一個月中的幾天（分頁/標簽式視圖）：

  

• 選擇每一天會過濾頁面上表格的數據

• 下個月可以通過單擊出現在行末尾的月份名稱來選擇，數據將被相應地過濾。

我試過的 -

• 使用 react-bootstrap 分頁器
• 使用數據表

我發現很難弄清楚如何實現日歷並將其作為過濾器與數據表連接。 順便說一句，表的數據可以從任何數據庫或一些示例數據中找到。

我希望我說得盡可能清楚。 隨意告訴我是否需要添加一些東西。

Answer 1

您可以執行 2 個多個組件，例如Filters和Data ，首先將存儲您可能的日期和月份的列表，在用戶選擇時它將調用一些函數，這將更改組件Data道具，並且在Data ShouldComponentUpdate ，您可以檢查過濾器是否更改或否，並按過濾器對日期進行排序。

這是一個很好的例子，它是如何在 react 中實現的，而且使用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)