如何从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

回答

相关问题