React Material-UI 选择器如何转换矩对象和设置状态答案

【问题标题】：React Material-UI pickers how to convert moment object and set stateReact Material-UI 选择器如何转换矩对象和设置状态
【发布时间】：2020-01-23 22:03:04
【问题描述】：

我是 React 初学者，正在使用 Material-UI 选择器试试运气。

console.log 中的 props 是一个 moment 对象。现在我想将时刻对象转换为常规日期格式并用它更新 state 道具 date 但我不知道该怎么做。尤其是指南太多后，尝试结束错误^^ 感谢您的宝贵时间

class EventFormMaterial extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: ""
    };

handleDateChange(props) {
setState({}) ...
  }

return (
  <div className="flex-second-container">
          <MuiPickersUtilsProvider utils={MomentUtils}>
            <DateTimePicker
              variant="inline"
              label="Basic example"
              value={this.state.selectedDate}
              onChange={this.handleDateChange}
              format="dd/MM/yyyy HH:mm"
            />
          </MuiPickersUtilsProvider>
        </div>
);

【问题讨论】：

标签： reactjs material-ui momentjs

【解决方案1】：

handleDateChange = date => { setState({ date: date.format('dd/MM/yyyy HH:mm') }) }

如果日期是一个时刻对象，你可以格式化它并在handleDateChange方法上设置新的状态。

【讨论】：

非常感谢。它现在正在工作。如果我回顾一下，我会说我的主要问题是我忘记在类构造函数之后绑定函数，总是有错误消息，我完全理解错误。一直以为我以错误的方式设置了我的状态。在您回答之后，我知道我是对的，并寻找真正的问题。
很高兴知道这对您有帮助:)
这并不是解决问题的好方法。此格式化步骤不是必需的，您只需将 date 权限传递给您的状态即可。

【解决方案2】：

简单地将返回的日期对象放入状态

state = { date: moment() } 

handleDateChange = (newDate) => { 
  this.setState({ date: newDate })
} 

<DatePicker
  value={this.state.date}
  onChange={this.handleDateChange} 
/>

无需额外工作。

【讨论】：