小编Tom*_*Tom的帖子

如何将material-ui-pickers的日期选择器与ReactJS的State Hook一起使用并将日期传递给父组件?

我正在尝试使用 Material-ui-pickers 的日期选择器,其中示例演示是使用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;
Run Code Online (Sandbox Code Playgroud)

在“onChange”上,该函数修改其“selectedDate”状态。

在我的父组件中,我定义了该函数:

handleChangeTo = e => {
    this.setState({ dateTo: e.target.value });
};
Run Code Online (Sandbox Code Playgroud)

并且,在渲染方法中,我尝试这样调用它:

<YearMonthPicker handleChangeTo={this.handleChangeTo} /> …
Run Code Online (Sandbox Code Playgroud)

reactjs material-ui react-hooks

4
推荐指数
1
解决办法
1万
查看次数

标签 统计

material-ui ×1

react-hooks ×1

reactjs ×1