如何從Date Picker中獲取日期並在表格中顯示？材料的UI。 ReactJS

我使用Material-UI中的Date Picker組件來處理React JS。我想在桌上顯示選定的日期。日期是一個對象，當我嘗試在表格行中顯示時發生錯誤。這個怎麼做？如何從Date Picker中獲取日期並在表格中顯示？材料的UI。 ReactJS

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

來源

2017-12-18 Italik

被髮送到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());

來源

2017-12-18 08:44:40

它似乎工作，但我有控制檯中的錯誤「警告：失敗的道具類型：提供給'DatePicker'，期望的'對象'''字符串'類型的無效prop'值'。 – Italik

我刪除已經不必要的 – Italik

嘗試更新的代碼片段。直接在render方法中轉換爲日期字符串，因爲DatePicker似乎期待Date對象。 –

您錯過了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> 
    }

來源

2017-12-18 08:29:22 Rodius

還是錯誤。「警告：失敗的道具類型：提供給」TableRowColumn「的預期爲ReactNode的道具」children「無效。 – Italik

爲什麼最初將日期狀態聲明爲對象？我猜這是一個字符串？您還需要檢查是否有日期並顯示其他內容（否則可能是當前的）。我會更新我的答案。 – Rodius

{this.state.controlledDate}

不{this.controlledDate}

來源

2017-12-18 08:31:12 illiteratewriter

雖然這可能會回答問題，但您可能不想提供一些額外的細節並解釋答案。在目前的狀態下，這個答案是低質量的。 –

如何從Date Picker中獲取日期並在表格中顯示？材料的UI。 ReactJS

回答

相關問題