Reactjs 如何从日期选择器保存日期值？

我想保存这个代码中的日期值，我使用vscode和reactjs以及Material包

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 200,
  },
});

function DatePickers(props) {
  const { classes } = props;
  //console.log(props)

  return (
    <form className={classes.container} noValidate>
      <TextField
        id="date"
        label="Birthday"
        type="date"
        defaultValue="2017-05-24"
        className={classes.textField}
        InputLabelProps={{
          shrink: true,
        }}
      />
    </form>
  );
}

DatePickers.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(DatePickers);

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/TextField”导入TextField；
常量样式=主题=>({
容器：{
显示：“flex”，
flexWrap:“wrap”，
},
文本字段：{
marginLeft:theme.spating.unit，
marginRight:theme.space.unit，
宽度：200，
},
});
函数日期选择器（道具）{
常量{classes}=props；
//控制台日志（道具）
返回(
);
}
DatePickers.propTypes={
类：PropTypes.object.isRequired，
};
导出默认样式（样式）（日期选择器）；

为了保存所选日期，您的代码应该如下所示：

import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = theme => ({
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 200
  }
});

class DatePickers extends Component {
  state = {
    date: "2017-05-24"
  };

  handleChange = event => {
    this.setState({ date: event.target.value });
  };

  render() {
    const { classes } = this.props;
    console.log(this.state);
    return (
      <form className={classes.container} noValidate>
        <TextField
          id="date"
          label="Birthday"
          type="date"
          value={this.state.date}
          onChange={this.handleChange}
          className={classes.textField}
          InputLabelProps={{
            shrink: true
          }}
        />
      </form>
    );
  }
}

DatePickers.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(DatePickers);

import React，{Component}来自“React”；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/TextField”导入TextField；
常量样式=主题=>({
容器：{
显示：“flex”，
柔性包装：“包装”
},
文本字段：{
marginLeft:theme.spating.unit，
marginRight:theme.space.unit，
宽度：200
}
});
类日期选择器扩展组件{
状态={
日期：“2017-05-24”
};
handleChange=事件=>{
this.setState（{date:event.target.value}）；
};
render（）{
const{classes}=this.props；
console.log（this.state）；
返回(
);
}
}
DatePickers.propTypes={
类：PropTypes.object.isRequired
};
导出默认样式（样式）（日期选择器）；