时间戳

首页 > 解决方案 > 第一次更改时无法获取 Material-Ui 日期选择器日期

javascript - 第一次更改时无法获取 Material-Ui 日期选择器日期

问题描述

所以我无法在第一次选择时从 material-ui dateandtimepicker 获取日期，不知何故，我只能在第二次点击时获得价值，并且该值是前一个值，也很想知道是否有任何其他方法可以将日期转换为像这样的格式 yyyy:mm:dd:hh:mm 不使用 moment.js

这是我的代码：

import React, { Component } from 'react'
import DataPicker from './UI-components/DataPicker'

class EventForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      errors: {},
      start:'',
      end:''
    }
  }

  onChange1(e) {
    this.setState({
      start: e.target.value,
    });
    console.log(this.state.start)
  }

  render() {
    return (
      <div>
        <DataPicker
          label="Event Starts"
          onChange={this.onChange1.bind(this)} 
          defaultas="2017-05-24T10:30"
        />
      </div>
    )
  }
}
export default EventForm;

日期选择器.js

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: 300,
  },
});

function DateAndTimePickers(props) {
  const { classes } = props;

  return (
    <form className={classes.container} noValidate>
      <TextField
        id="datetime-local"
        label={props.label}
        type="datetime-local"
        defaultValue={props.defaultas}
        className={classes.textField}
        onChange = {props.onChange} 
        value = {props.value} 
        InputLabelProps={{
          shrink: true,
        }}
      />
    </form>
  );
}

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

export default withStyles(styles)(DateAndTimePickers);

标签： javascriptreactjsdatematerial-ui

解决方案

您没有将 传递value给DatePicker组件。您可以使用startasvalue来控制DatePicker并完全忽略defaultValue。

console.log(this.state.start)您的onChange1处理程序中未显示start您认为的原因是因为是setState异步的，这意味着this.state.start尚未更新。

class EventForm extends Component {
  state = {
    text: '',
    errors: {},
    start: '2017-05-24T10:30',
    end: ''
  };

  onChange1 = (e) => {
    this.setState({
      start: e.target.value,
    });
  };

  render() {
    return (
      <div>
        <DataPicker
          label="Event Starts"
          onChange={this.onChange1}
          value={this.state.start}
        />
      </div>
    )
  }
}

推荐阅读