Блог

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

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

И в методе render я пытаюсь вызвать его как таковой:

 <YearMonthPicker handleChangeTo={this.handleChangeTo} />
  

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

Вместо того, чтобы использовать 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 и вообще не иметь никакого состояния компонента в дочернем компоненте.