Reactjs 单击项目时打印当前选定的项目

我使用MaterialUI中的选择器创建了这个类。 我无法打印当前选定的项目

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { MuiPickersUtilsProvider, DatePicker } from "@material-ui/pickers";
import MomentUtils from "@date-io/moment";


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


class YearPickerClass extends React.Component {
  state = {
    yearFrom: new Date(1900, 1, 1, 1, 1, 1, 1),
    yearTo: new Date(1950, 1, 1, 1, 1, 1, 1),
  }


  componentWillReceiveProps(props) {
    console.log("willReceive")
    console.log(props)
  }

  handleChange = (date) => {
    console.log("date")
    console.log(date) //prints 1900 even if I select a different year

  }


  render() {
    const classes = this.props;
    var from = new Date(1900, 1, 1, 1, 1, 1, 1);
    var to = new Date(1950, 1, 1, 1, 1, 1, 1);

    return (
      <form className={classes.container} noValidate>

        <MuiPickersUtilsProvider utils={MomentUtils}>

          <DatePicker
            key="yearFrom"
            views={["year"]}
            label="Year From"
            value={this.state.yearFrom}
            onChange={this.handleChange}
            animateYearScrolling
            minDate={from}
            maxDate={to}

          />

        </MuiPickersUtilsProvider>


      </form>
    );
  }
}

export default (YearPickerClass);

import React，{useState}来自“React”；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/pickers”导入{MuiPickersUtilsProvider，DatePicker}”；
从“@date io/moment”导入MomentUtils；
常量样式=主题=>({
容器：{
显示：“flex”，
flexWrap:“wrap”，
},
文本字段：{
边缘左侧：主题。间距（1），
边缘光：主题。间距（1），
宽度：200，
},
});
类YearPickerClass扩展了React.Component{
状态={
年份自：新日期（1900年1月1日1月1日1月1日），
年份至：新日期（1950年1月1日1月1日），
}
组件将接收道具（道具）{
console.log（“willReceive”）
控制台日志（道具）
}
handleChange=（日期）=>{
控制台日志（“日期”）
console.log（date）//打印1900，即使我选择了不同的年份
}
render（）{
const classes=this.props；
var from=新日期（1900年1月1日1月1日1日1月1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日；
var to=新日期（1950年1月1日1月1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1日1；
返回(
);
}
}
导出默认值（YearPickerClass）；

---

您知道如何在handleChange函数中获取当前选定的项吗？

一旦您将获得的日期转换为矩，您将看到您实际上在handleChange函数中获取了新值：

handleChange = date => {
  console.log(moment(date).format('YYYY'));
};

请确保它工作正常：

---

一旦您将获得的日期转换为矩，您将看到您在handleChange函数中实际获得了新值：

handleChange = date => {
  console.log(moment(date).format('YYYY'));
};

请确保它工作正常：

---

初始选择始终打印，我正在尝试打印新选择的对象。我用代码示例更新了我的答案。请注意，该值实际上在控制台中得到更新。初始选择总是打印的，我正在尝试打印新选择的对象。我用代码示例更新了我的答案。请确保该值在控制台中实际得到更新。