如何在material-ui中將日期對象轉換為字符串？ 反應。 在桌子上顯示日期

Question

material-ui中的DatePicker生成日期對象。 我想在表格上顯示選擇值。 為了顯示這一點，我需要將對象轉換為字符串，因為不可能將對象傳遞給表格單元格。 在哪個地方以及如何使用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

在您的handleChangeDate執行此轉換，從event.date創建字符串以供查看。 或者使用formatDate道具在日期選擇器中正確執行，解決方案在另一個答案中