如何从日期选择器中获取日期并显示在表格中？Material-UI. ReactJS

Question

我在 React JS 中使用了 Material-UI 的日期选择器组件。我想在表格中显示所选日期。日期是一个对象，我尝试将其显示在表格行中时出现了错误。该如何解决呢？

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

- Italik

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

- Nandu Kalidindi

---

它似乎可以工作，但是我在控制台中有一个错误：“警告：属性类型失败：DatePicker提供了类型为“string”的无效属性value，但期望的是object。” - Italik

尝试更新的片段。直接在渲染方法中转换为日期字符串，因为 DatePicker 似乎期望一个日期对象。 - Nandu Kalidindi

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

- Rodius

---

仍然有错误。 “警告：属性类型失败：无效的属性children提供给TableRowColumn，期望一个ReactNode。” - Italik

为什么你最初将日期状态声明为对象？我猜它是一个字符串？你还需要检查是否有日期并显示其他内容（否则可能是当前日期）。我会更新我的答案。 - Rodius

Answer 3

{this.state.controlledDate}

不是 {this.controlledDate}

- illiteratewriter

---

虽然这可能回答了问题，但您可能希望提供一些额外的细节并解释答案。在当前状态下，这个答案质量较低。 - Rolf ツ