Question

材料-ui中的DatePicker生成日期对象。我想在表格上显示选择值。为了显示这一点，我需要将Object转换为字符串，因为无法将Object传递给表格单元格。我在哪个地方以及如何使用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 prop在datepicker中正确执行，解决方案位于另一个answer

如何将date对象转换为material-ui中的字符串？ ReactJS。在桌子上显示日期

1 个答案: