InfiniteCalendar 中 onSelect 的事件處理程序

Question

我正在嘗試在 React 框架的InfiniteCalendar中獲取selected日期值，但無法使其工作。 我怎么做？

我想要的輸出是在以下演示的數據預覽中顯示日期：

演示

import React from 'react';
import { render } from 'react-dom';
import InfiniteCalendar from 'react-infinite-calendar';
import 'react-infinite-calendar/styles.css'; // only needs to be imported once

// Render the Calendar
var today = new Date();
var lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);

render(
  <InfiniteCalendar
    width={400}
    height={600}
    selected={today}
    disabledDays={[0,6]}
    minDate={lastWeek}
  />,
  document.getElementById('root')
);

[謝謝！ 我是 React 的新手。]

Answer 1

要獲取選定的值，您需要創建一個函數來管理此值，並將此函數作為參數傳遞到 InfiniteCalendar 組件的onSelect={this.handleOnSelect}中。

PD。 我刪除了元素只是為了讓這個例子更小。

import React, { useState, Component } from "react";
import { Form, Field } from "react-advanced-form";
import { Input, Button, Checkbox } from "react-advanced-form-addons";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/bootstrap.css";
import DatePicker from "react-date-picker";
import InfiniteCalendar from "react-infinite-calendar";
import "react-infinite-calendar/styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

export default class RegistrationForm extends React.Component {

  handleOnSelect = selectedDate => {
    console.log(selectedDate);
  };

  render() {
    return (
      <section className="container">
        <Form onSubmitStart={this.props.onSubmitStart}>
          <p>Date of Birth</p>
          <InfiniteCalendar
            name="dateOfBirth1"
            onSelect={this.handleOnSelect}
          />
        </Form>
      </section>
    );
  }
}