javascript - Material-UI/REACT - 如何让我的 DatePicker 在组件而不是函数下工作

Question

有人能告诉我如何让这段代码在 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

标签： javascriptreactjsmaterial-uisingle-page-application

Answer 1

问题在于您的状态对象。

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

问题是当您更新日期时，它会返回一个值作为回报，您需要在回调处理程序中处理该值。