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

Z时代
2024-01-10
分类：问答

我使用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>

const date = new Date();  
console.log(typeof date);  
console.log(date.toDateString());

回答：

您错过了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> 
    }