日付ピッカーから日付を取得してテーブルに表示する方法は？マテリアルUI。 ReactJS

Question

React JSのMaterial-UIのDate Pickerコンポーネントを使用します。選択した日付をテーブルに表示したい。日付はオブジェクトで、テーブル行に表示しようとするとエラーが発生します。これを行う方法？

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

まだ

Answer 2

状態がTableRowにありません。

constructor(props) { 
     super(props); 
     this.state = { controlledDate: '' }; 
     this.handleChangeDate = this.handleChangeDate.bind(this); 
    } 

    ... 

    render() { 
     ... 

     <TableRow> 
      TableRowColumn>{this.state.controlledDate || New Date(Date.now())}</TableRowColumn> 
     </TableRow> 
    } 

Answer 3

{this.state.controlledDate} 

ない{this.controlledDate}