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

【问题标题】：Unable to get Material-Ui datepicker date on the first change第一次更改时无法获取 Material-Ui 日期选择器日期
【发布时间】：2018-07-13 12:14:55
【问题描述】：

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

这是我的代码：

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

【问题讨论】：

标签： javascript reactjs date material-ui

【解决方案1】：

我对 react 了解不多，但这可能有助于日期的格式；

<td>
{new Intl.DateTimeFormat('en-GB', { 
    year: 'numeric', 
    month: 'long', 
    day: '2-digit' 
}).format(customer.firstSale)}
</td>

来自here的示例；

【讨论】：

【解决方案2】：

您没有将value 传递给DatePicker 组件。您可以使用start 作为value 来控制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>
    )
  }
}

【讨论】：

但现在我得到的 Input 包含一个 datetime-local 类型的输入，其中包含 value 和 defaultValue 道具。输入元素必须是受控或不受控的（指定 value 属性或 defaultValue 属性，但不能同时指定两者）而且我很想使用默认值，并将其设置为今天的日期
确实做到了，现在获取 this.setState 不是一个函数并且未捕获错误：引发了跨域错误。 React 无法访问开发中的实际错误对象我正在使用 webpack 顺便说一句
好的，我没有报错，使用奥斯曼函数时报错

【解决方案3】：

好吧，您变老了意味着状态中的最后一个设置值，因为您同时/并行地同时/并行地执行设置值和控制台值。意味着你知道 JS 是异步的

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

这里发生了什么将新值设置为状态和控制台当前/上次/默认（第一次）状态值，这就是您第二次获得它的原因。

要获得当前的，这样做：

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

一旦您的设置状态完成，它将执行并控制台值。

对于没有momentjs 的格式化日期，您可以找到momentjs 的来源，他们在幕后所做的显然他们正在使用JS。如果我是你，我会这样做。哈哈

【讨论】：