date-object를 material-ui의 문자열로 변환하는 방법은 무엇입니까? ReactJS. 표에 날짜 표시

Question

DatePicker in material-ui generate date Object. 나는 테이블에 선택 가치를 보여주고 싶다. 이를 표시하려면 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