Material-UI / REACT - как заставить мой DatePicker работать в компоненте вместо функции - PullRequest
Новая
       30

Material-UI / REACT - как заставить мой DatePicker работать в компоненте вместо функции

0 голосов
/ 23 сентября 2019

Может кто-нибудь сказать мне, как заставить этот код работать под компонентами React? 

import React, { Fragment, useState } from "react";
import DateFnsUtils from "@date-io/date-fns"; // choose your lib
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import TextField from "@material-ui/core/TextField";

export default function Picker() {
  const [startDate, handleStartDate] = useState(new Date());
  const [endDate, handleEndDate] = useState(new Date());

  return (
    <Fragment>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DatePicker value={startDate} onChange={handleStartDate} />
      </MuiPickersUtilsProvider>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DatePicker value={endDate} onChange={handleEndDate} />
      </MuiPickersUtilsProvider>
    </Fragment>
  );
}

Полагаю, это не слишком глупый вопрос, так как я еще не очень разбираюсь в кодировании в JS / REACT,Я ценю некоторые подсказки, потому что кажется, что я застрял :-)

Моя цель - сохранить все значения, введенные пользователем, в State, поэтому я подготовил этот код, но я не уверен, что я делаюнеправильно 

import React, { Fragment, Component } from "react";
import DateFnsUtils from "@date-io/date-fns"; // choose your lib
import {
  DatePicker,
  TimePicker,
  DateTimePicker,
  MuiPickersUtilsProvider
} from "@material-ui/pickers";

export default class CPicker extends Component {
  state = {
    TripFormUserData: {
      startDate: new Date(),
      endDate: new Date(),
      //here are some other fields which will be available in a FORM
      id: "",
      country: "",
      transport: "",
      tripStatus: "",
      place: "",
      acommodations: "",
      employeeId: "",
      tripIdentifier: ""
    }
  };

  handleStartDate = () => {
    this.setState({
      TripFormUserData: {
        startDate: this.state.startDate
      }
    });
  };

  render() {
    const {
      TripFormUserData: { startDate, endDate }
    } = this.state;
    return (
      <Fragment>
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <DatePicker
            value={startDate}
            onChange={this.handleStartDate}
            minDate={new Date()}
          />
        </MuiPickersUtilsProvider>
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <DatePicker
            value={endDate}
            onChange={this.handleEndDate}
            minDate={new Date()}
          />
        </MuiPickersUtilsProvider>
      </Fragment>
    );
  }
}

Вот ссылка на мое приложение https://codesandbox.io/s/bold-bas-d3ito

1 Ответ

0 голосов
/ 23 сентября 2019

Проблема связана с вашим объектом состояния. 

import React, { Fragment, Component } from "react";
import DateFnsUtils from "@date-io/date-fns"; // choose your lib
import {
  DatePicker,
  TimePicker,
  DateTimePicker,
  MuiPickersUtilsProvider
} from "@material-ui/pickers";

export default class CPicker extends Component {
  state = {

      startDate: new Date(),
      endDate: new Date(),
      //here are some other fields which will be available in a FORM
      id: "",
      country: "",
      transport: "",
      tripStatus: "",
      place: "",
      acommodations: "",
      employeeId: "",
      tripIdentifier: ""
  };

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

  handleEndDate = (date) => {
    this.setState({
        endDate: date
    });
  };

  render() {
    const {
      startDate, endDate
    } = this.state;
    return (
      <Fragment>
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <DatePicker
            value={startDate}
            onChange={this.handleStartDate}
            minDate={new Date()}
          />
        </MuiPickersUtilsProvider>
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <DatePicker
            value={endDate}
            onChange={this.handleEndDate}
            minDate={new Date()}
          />
        </MuiPickersUtilsProvider>
      </Fragment>
    );
  }
}

Проблема в том, что когда вы обновляете дату, она вернет вам значение, которое вы должны обработать в обработчике обратного вызова.

...