InfiniteCalendar 中 onSelect 的事件处理程序

Question

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

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

Demo

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

InfiniteCalendar 中 onSelect 的事件处理程序

Event Handler for onSelect in InfiniteCalendar

javascript

forms

events

event-handling

reactjs

Demo