date-objectをmaterial-uiの文字列に変換するには？ ReactJS。テーブルに日付を表​​示

Question

DatePicker in material-ui generate dateオブジェクト。私はテーブルに選択値を表示したい。これを表示するには、Objectを表のセルに渡すことができないため、Objectをstringに変換する必要があります。 どのような場所で、どのように私はdateToString()テーブルの行に日付を表​​示する機能を使用する必要がありますか？または、DatePickerからテーブルに日付を渡すより良い方法がありますか？

親コンポーネント：

class Home extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { data: []}; 
} 

handleSubmit = (submission) =>{ 
    this.setState({ 
    data: [...this.state.data, submission] 
})} 

render() { 
    return (
    <div> 
     <AddTaskDialog 
     onSubmit={this.handleSubmit}    
     /> 
     <TableTasks 
     data={this.state.data} 
     header={[ 
      { 
      name: "No", 
      prop: "no" 
      }, 
      { 
      name: "Task", 
      prop: "nameTask" 
      }, 
      { 
      name: "Deadline", 
      prop: 'deadline' 
      }, 
      { 
      name: "Priority", 
      prop: "priority" 
      } 
     ]} 
     /> 
    </div> 
    ); 
    }} 
export default Home; 

子コンポーネント：

export default class AddTaskDialog extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { priority: '', nameTask: '', deadline: new Date(), open:false }; 
    this.handleChangeDate = this.handleChangeDate.bind(this); 
    this.handleTextFieldChange = this.handleTextFieldChange.bind(this); 
    this.handleChangeSelectField = this.handleChangeSelectField.bind(this); 
    this.handleOpen = this.handleOpen.bind(this); 
} 

handleTextFieldChange = (event) =>{ 
    this.setState({ 
    nameTask: event.target.value, 
    });} 

handleChangeSelectField = (event, index, priority) => { 
    this.setState(
     {priority} 
);} 

handleChangeDate = (event, date) => { 
    this.setState({ 
    deadline: date 
});} 

handleOpen =() => { 
    this.setState({open: true}); 
}; 

onSubmit = (e) => { 
    e.preventDefault(); 
    this.setState({ open: false }); 
}; 

render() { 
    return (
    <form> 
    <AddButton onClick={this.handleOpen} /> 
    <Dialog title="Add new task" actions={this.props.actions} modal={false} open={this.state.open} > 
    <TextField 
     name="nameTask" 
     floatingLabelText="Task" 
     value={this.state.nameTask} 
     onChange={e => this.handleTextFieldChange(e)} 
     errorText={this.state.nameTaskError} 
     floatingLabelFixed 
    /> 

    <DatePicker floatingLabelText="Deadline" value={this.state.deadline} onChange={this.handleChangeDate}/> 


    <SelectField floatingLabelText="Priority" value={this.state.priority} onChange={this.handleChangeSelectField} > 
     <MenuItem value="High" primaryText="High" /> 
     <MenuItem value="Medium" primaryText="Medium" /> 
     <MenuItem value="Low" primaryText="Low" /> 
     </SelectField> 
    <RaisedButton label="Submit" onClick={e => this.onSubmit(e)} primary /> 
    </Dialog> 
</form> 
);}} 

子コンポーネント：

const row = (x, i, header) => { 
<TableRow key={`tr-${i}`}> 
    {header.map((y, k) => 
    <TableRowColumn key={`trc-${k}`}> 
     {x[y.prop]} 
    </TableRowColumn>)} 
</TableRow>} 

export default ({ data, header }) => 
<Table> 
    <TableHeader> 
    <TableRow> 
    {header.map((x, i) => 
     <TableHeaderColumn key={`thc-${i}`}> 
     {x.name} 
     </TableHeaderColumn> 
    )} 
    </TableRow> 
    </TableHeader> 
    <TableBody> 
    {data.map((x, i) => row(x, i, header))} 
    </TableBody> 
</Table>; 

Answer 1

閲覧目的のためにevent.dateから文字列を作成し、あなたのhandleChangeDateにこの変換を行います。 またはformatDate小物を使用して日付ピッカー内で正しく行うか、解決策は別のものにあるanswer