Как использовать средство выбора даты для материалов-пользовательского интерфейса с ReactJS State Hook и передавать дату родительскому компоненту?

Question

Я пытаюсь использовать средство выбора даты для материалов-пользовательского интерфейса, где демонстрационные примеры написаны с использованием State Hooks. Я хотел бы получить значение даты в качестве обратного вызова для родительского компонента. Это дочерний компонент:

import React, { Component } from 'react';
import { Fragment, useState } from "react";
import { DatePicker, InlineDatePicker } from "material-ui-pickers";

function YearMonthPicker(props) {
const [selectedDate, handleDateChange] = useState("2013-01-01");

  return (
        <div className="picker">
          <DatePicker
            openTo="year"
            views={["year", "month"]}
            label="Year and Month"
            helperText="With min and max"
            minDate={new Date("2011-01-01")}
            maxDate={new Date("2018-12-01")}
            value={selectedDate}
            onChange={handleDateChange}
          />
        </div>
  );
}

export default YearMonthPicker;

В "onChange" функция изменяет свое состояние "selectedDate".

В моем родительском компоненте я определил функцию:

handleChangeTo = e => {
    this.setState({ dateTo: e.target.value });
};

И в методе рендеринга я пытаюсь вызвать его так:

<YearMonthPicker handleChangeTo={this.handleChangeTo} />

Как я понимаю, если я изменю функцию "onChange" на props.handleChangeTo, то состояние дочернего компонента не будет обновляться при изменении. Как правильно передать дату родительскому компоненту?

Answer 1

Вместо того, чтобы использовать handleDataChange непосредственно как обработчик onChange Вы можете создать новую функцию, которая вызывает handleDataChange а также handleChangeTo из реквизита. handleChangeTo затем получит значение напрямую, а не событие.

пример

function YearMonthPicker({ handleChangeTo }) {
  const [selectedDate, handleDateChange] = useState("2013-01-01");

  return (
    <div className="picker">
      <DatePicker
        openTo="year"
        views={["year", "month"]}
        label="Year and Month"
        helperText="With min and max"
        minDate={new Date("2011-01-01")}
        maxDate={new Date("2018-12-01")}
        value={selectedDate}
        onChange={val => {
          handleDateChange(val);
          handleChangeTo(val);
        }}
      />
    </div>
  );
}

В качестве альтернативы вы можете сохранить это состояние в родительском компоненте и передать его в качестве подпорки YearMonthPicker и не иметь какого-либо компонента состояния у ребенка вообще.