reactjs - 如何实现 Material UI DatePicker 和 TimePicker？值未定义

Question

我习惯于提出状态，但这个值来自组件 DatePicker & TimePicker，我怎么可能将它提升到父组件或事件读取它在组件 DatePicker & TimePicker 被调用？

我正在关注亚历克斯的实施。console.log(this.state.date this.state.time)投掷undefined

import React from "react";
import DateFnsUtils from "@date-io/date-fns";
import "./PickerBackdrop.css";
import {
  DatePicker,
  TimePicker,
  DateTimePicker,
  MuiPickersUtilsProvider
} from "@material-ui/pickers";

class PickerDrawer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      date: null,
      time: null
    };
    this.handleDate = this.handleDate.bind(this);
    this.handleTime = this.handleTime.bind(this);
  }
  handleTime(event, time) {
    this.setState({ time: time });
  }

  handleDate(event, date) {
    this.setState({ date: date });
  }

  render() {
    return (
      <div>
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <DatePicker
            label="Due Date"
            value={this.state.date}
            onChange={this.handleDate}
            animateYearScrolling
            style={{ fontSize: "26px" }}
            showTodayButton={true}
            disablePast={true}
          />
          <TimePicker
            label="Time"
            value={this.state.time}
            onChange={this.handleTime}
            animateYearScrolling
            className=""
          />
        </MuiPickersUtilsProvider>
      </div>
    );
  }
}
export default PickerDrawer;

关于 Material UI DatePicker 和 TimePicker有一些相关的 stackoverflow问题，但我不明白答案......对不起

标签： reactjs

Answer 1

工作示例：

import React, { Component } from 'react'
import Grid from '@material-ui/core/Grid'
import { MuiPickersUtilsProvider, TimePicker, DatePicker } from 'material-ui-pickers'
import DateFnsUtils from '@date-io/date-fns'


class Page extends Component {

    constructor(props) {
        super(props)
        this.state = {
            startDate: new Date(),
            endDate: new Date()
        }

    }

    handleDateChange = date => this.setState({ startDate: date })

    handleTimeChange = date => this.setState({ startDate: date })


    render() {

        return (
                <Grid container spacing={Number(8)} >
                    <MuiPickersUtilsProvider utils={DateFnsUtils}>
                        <Grid item xs={12}>
                            <DatePicker
                                fullWidth
                                margin="normal"
                                variant="outlined"
                                label="Start date"
                                value={this.state.startDate}
                                onChange={this.handleDateChange}
                            />
                        </Grid>
                        <Grid item xs={12}>
                            <TimePicker
                                fullWidth
                                mode='24h'
                                margin="normal"
                                variant="outlined"
                                label="Start time"
                                value={this.state.startDate}
                                onChange={this.handleTimeChange}
                            />
                        </Grid>
                    </MuiPickersUtilsProvider>
                </Grid>
            )
    }
}

export default Page