用于onSelect的InfiniteCalendar事件处理程序

Question

我试图在React框架的selected InfiniteCalendar中获得日期值，但无法使其工作。我该怎么做？

我想要的输出是在以下演示中在数据预览中显示日期：

演示

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')
);

谢谢!我是新来的。

Answer 1

要获得所选的值，您需要创建一个函数来管理该值，并将此函数作为参数传递到InfiniteCalendar组件的InfiniteCalendar中。

警局。我删除元素只是为了保留更少的例子。

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>
    );
  }
}