Обработчик событий для onSelect в InfiniteCalendar - PullRequest
Новая
       39

Обработчик событий для onSelect в InfiniteCalendar

1 голос
/ 22 марта 2020

Я пытаюсь получить значение даты selected в InfiniteCalendar инфраструктуры React, но пока не могу заставить его работать. Как я могу это сделать?

Мой желаемый вывод - отображать дату в предварительном просмотре данных в следующей демонстрации:

Демо 

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.]

1 Ответ

1 голос
/ 22 марта 2020

, чтобы получить выбранное значение, вам нужно создать функцию для управления этим значением и передать эту функцию в качестве аргумента в onSelect={this.handleOnSelect} компонента 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>
    );
  }
}
...