javascript - 如何从日期选择器中获取日期并显示在表格中？ Material -UI。响应式JS

Question

我使用 Material-UI 中的 Date Picker 组件用于 React JS。我想在表格上显示选定的日期。日期是一个对象，尝试在表格行中显示时出现错误。这个怎么做？

import React, { Component } from 'react';
import DatePicker from 'material-ui/DatePicker';
import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';

export default class AddTaskDialog extends Component {
  constructor(props) {
    super(props);
    this.state = { controlledDate: {} };
    this.handleChangeDate = this.handleChangeDate.bind(this);
  }

  handleChangeDate = (event, date) => {
    this.setState({
      controlledDate: date,
    });
  };

  render() {
    return (
      <div>
        <DatePicker hintText="Date" value={this.state.controlledDate} onChange={this.handleChangeDate}/>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>Date</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableRowColumn>{this.state.controlledDate}</TableRowColumn>
            </TableRow>
          </TableBody>
        </Table>
      </div>
    );
  }
}

Answer 1

发送到 handleChangeDate 处理程序的日期是 object 类型。您需要将其转换为日期字符串，以便在 TableRowColumn 中呈现。

export default class AddTaskDialog extends Component {
 constructor(props) {
 super(props);
 this.state = { controlledDate: new Date() };
 this.handleChangeDate = this.handleChangeDate.bind(this);
}

handleChangeDate = (event, date) => {
  this.setState({
    controlledDate: date
  });
};

// INSIDE RENDER
<TableRowColumn>{this.state.controlledDate.toDateString()}</TableRowColumn>

const date = new Date();

console.log(typeof date);
   
console.log(date.toDateString());