• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

如何从Date Picker中获取日期并在表格中显示?材料的UI。 ReactJS

JavaScript 来源:Italik 3次浏览

我使用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> 
    ); 
    } 
} 

===========解决方案如下:

被发送到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> 


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)