如何使用物料界面选择器'；使用ReactJS'；s状态钩子并将日期传递给父组件？

我正在尝试使用，其中示例演示是使用。我想获取日期值作为对父组件的回调。 这是子组件：

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;

在render方法中，我尝试这样调用它：

<YearMonthPicker handleChangeTo={this.handleChangeTo} />

---

据我所知，如果我将“onChange”的函数更改为props.handleChangeTo，那么子组件的状态将不会在更改后更新。将日期传递给父组件的正确方法是什么？

不使用

handleDataChange

直接作为

onChange

的处理程序，您可以创建一个新函数，从props调用

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（{handleChangeTo}）{
const[selectedDate，handleDate change]=useState（“2013-01-01”）；
返回(
{
处理日期变更（val）；
handleChangeTo（val）；
}}
/>
);
}

---

或者，您可以将此状态保留在父组件中，并将其作为道具传递给

YearMonthPicker

，而在子组件中根本没有任何组件状态。

您的意思是

props.handleChangeTo（val）而不是
handleChangeTo（val）？另外，关于“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>
  );
}