如何在 React Big Calendar 中获取第一个和最后一个可见日期？

Question

如何在 React Big Calendar 中获取第一个和最后一个可见日期？这将有助于数据库查询以查看事件。我正在尝试调用该onNavigate ()函数并获取start和end使用该moment库，但两个值都是undefined.

更新

我得到了开始的价值。仅当我按下返回、下一个箭头时才结束。日历出现时如何自动获取这些值？

class App extends Component {
  constructor() {
    super();
    this.state = {
      current_date: '',
      events: [{
          id: 0,
          title: 'All Day Event very long title',
          allDay: true,
          start: new Date(2019, 3, 0),
          end: new Date(2019, 3, 1),
        },
        {
          id: 1,
          title: 'Long Event',
          start: new Date(2019, 3, 7),
          end: new Date(2019, 3, 10),
        }
      ]
    };  
  }


onNavigate =(date, view) => {
  let start, end;

  if (view === 'month') {
    start = moment(date).startOf('month').startOf('week')
    console.log(start)
    end = moment(date).endOf('month').endOf('week')
  }
  console.log(start, end);

  return console.log({ start, end });
}

  render() {
    console.log(this.state.current_date)
    return (
      <div>
        <Calendar
           localizer={localizer}
            events={this.state.events}
            startAccessor="start"
            endAccessor="end"
            onNavigate={this.onNavigate()}
          />
        </div>
    );
  }
}

Answer 1

在 React 组件中使用箭头函数时，你犯了一个常见的错误。只需简单地更改onNavigate={this.onNavigate()}为onNavigate={this.onNavigate}您的问题即可解决。我会给你一个简单的例子来发现这里正在发生什么。如果您只是想将一个函数传递给 onClick 处理程序，您可以定义您的函数并通过onClick三种方式将其传递给：

1-定义一个箭头函数并传递它：

class Example extends Component {

    clickHandler=()=>{
        console.log('I am clickHandler');

    }


    render() {

        return (
            <div onClick={this.clickHandler}>
                Example
            </div>
        );
    }
}

2-定义一个通用函数并传递它：

class Example extends Component {

    clickHandler(){
        console.log('I am clickHandler');

    }


    render() {

        return (
            <div onClick={()=>this.clickHandler()}>
                Example
            </div>
        );
    }
}

3- 定义一个函数并绑定它（这是旧的并且在 ES6 中不再常见）：

class Example extends Component {

    clickHandler(){
        console.log('I am clickHandler');

    }


    render() {

        return (
            <div onClick={this.clickHandler.bind(this)}>
                Example
            </div>
        );
    }
}

我希望这对你有帮助。

Answer 2

由于您没有将任何date属性传递给日历，因此默认日期是当前日期。模拟来自您的 onNavigate 调用componentDidMount，例如：

componentDidMount() {
    this.onNavigate(new Date(), "month");
}

顺便说一句，onNavigate仅称为后退/下一导航。您还需要处理onView，因为从周视图更改为月视图将扩大显示的日期范围。