Как получить дату из выбора даты и показать в таблице? Материал-пользовательский интерфейс. РеактJS

Я использую компонент Date Picker из Material-UI для React JS. Я хочу показать выбранную дату в таблице. Дата - это объект, и у меня возникает ошибка при попытке показать в строке таблицы. Как это сделать?

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

reactjs javascript html material-ui
person Italik    schedule 18.12.2017    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Дата, отправляемая обработчику 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());

person Nandu Kalidindi    schedule 18.12.2017
comment
Кажется, это работает, но у меня ошибка в консоли. Предупреждение: неверный тип реквизита: недопустимый реквизит value типа string, предоставленный DatePicker, ожидаемый object. - person Italik; 18.12.2017
comment
Попробуйте обновленный фрагмент. Преобразование в строку даты непосредственно в методе рендеринга, потому что DatePicker, похоже, ожидает объект Date. - person Nandu Kalidindi; 18.12.2017

arrow_upward
1
arrow_downward 

{this.state.controlledDate}

не {this.controlledDate}

person illiteratewriter    schedule 18.12.2017
comment
Хотя это может дать ответы на вопросы, вы можете не указывать дополнительные детали и пояснять ответ. В текущем состоянии этот ответ некачественный. - person Rolf ツ; 18.12.2017

arrow_upward
1
arrow_downward

Вам не хватает состояния в 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>
    }
person Rodius    schedule 18.12.2017
comment
Все равно ошибка. Предупреждение: неверный тип реквизита: неверный реквизит children указан для TableRowColumn, ожидается ReactNode. - person Italik; 18.12.2017
comment
Почему вы изначально объявляете состояние даты как объект? Я предполагаю, что это строка? Вам также нужно проверить, есть ли дата, и отобразить что-то еще (возможно, текущее в противном случае). Я обновлю свой ответ. - person Rodius; 18.12.2017