Wie konvertiert man in Material-Ui ein Date-Objekt in einen String? ReagierenJS. Datum in der Tabelle anzeigen

Question

DatePicker in Material-UI Datum generieren Objekt. Ich möchte den Wert auf der Tabelle anzeigen. Um dies zu zeigen, muss ich Objekt in String umwandeln, weil Objekt nicht an Tabellenzelle übergeben werden kann. In welchem ​​Ort und wie muss ich dateToString() Funktion verwenden, um Datum in der Tabellenzeile anzuzeigen? Oder ist vielleicht eine bessere Möglichkeit, DatePicker an die Tabelle zu übergeben?

Geordnete Komponente:

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; 

Kinder Komponente:

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

Kinder Komponente:

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

Sie diese Transformation in Ihrem handleChangeDate, string von event.date zur Ansicht zu schaffen. Oder tun Sie es richtig im Datepicker mit formatDate Prop, Lösung ist in einem anderen answer