使用react-jsonschema-form将开始日期和结束日期转换为Unix时间

Question

I use this library to build my forms: https://github.com/mozilla-services/react-jsonschema-form and I have a uischema for date inputs, but when I send the form I want to convert startdate and enddate in unix time.

Here is the code:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> import React, { Component, FormGroup, FormControl,ControlLabel } from 'react'; import NavBar from '../Header/NavBar'; import * as dropdown from "../../helpers/dropdown"; import Form from "react-jsonschema-form"; import * as formSubmit from "../../helpers/sumary"; import * as moment from 'moment'; class Sumary extends Component { constructor(props) { super(props); this.state = { activityschema: {}, machineschema: {}, activitiesTypes: [], startDate: moment(), endDate: moment(), activityType: 0, step: 0 }; } componentWillMount = async () => { const activitiesTypes = await dropdown.getActivitiesType(); const machines = await dropdown.getMachines(); this.setState({ activityschema: { type: "object", properties: { typeNameId: { type: 'number', title: 'Type:', enum: activitiesTypes.map((item) => { return item.id; }), enumNames: activitiesTypes.map((item) => { return item.name; }) }, startDate: {type: "string", title: 'Start date:'}, endDate: {type: "string", title: 'End date:'}, } }, machineschema: { type: "object", properties: { machinesId: { type: 'number', title: 'Machine Name:', enum: machines.map((item) => { return item.id; }), enumNames: machines.map((item) => { return item.name; }) }, //startDate: {type: "string", title: 'Start date:'}, //endDate: {type: "string", title: 'End date:'}, } }, uiSchema: { startDate: { "ui:widget": "date" }, endDate: { "ui:widget": "date" } } }); }; onSubmit = async ({formData}) => { if (formData.typeNameId === 10) { this.setState({ step: 1, formData: { ...this.state.formData, ...formData }, }); await formSubmit.getSumary(formData); console.log(formData); } else { await formSubmit.getSumary(formData); console.log(formData); } }; render () { let schema= null; schema = this.state.activityschema; let uiSchema = this.state.uiSchema; switch(this.state.step){ case 1: schema = this.state.machineschema; break; default: break; } return ( <Form schema={schema} uiSchema={uiSchema} onSubmit={this.onSubmit} formData={this.state.formData} /> ); } } export default Sumary; 

The code above works fine, but when I submit data, my formData in startDate and endDate are on this type of format:

Object {typeNameId: 3, startDate: "2017-12-22", endDate: "2017-12-27"}

But I want them in unix time.

I tryed something like this:

onSubmit = async ({formData}) => {
      this.state.formData.startDate.unix();
      this.state.formData.endDate.unix();
      if (formData.typeNameId === 10) {
        this.setState({
          step: 1,
          formData: {
            ...this.state.formData, 
            ...formData
          },
        });
        await formSubmit.getSumary(formData);
        console.log(formData);
      } else {
        await formSubmit.getSumary(formData);
        console.log(formData);
      }
    };

But this will get:

Unhandled Rejection (TypeError): Cannot read property 'startDate' of undefined

Answer 1

So I see following problems with your code:

1. You don't have formData in your React initial state.
2. If you want to use formData with your state you need to track onChange event to get the latest data
3. In your onSubmit if you use formData that you get in onSubmit call, it should be enough to remove Rejection error
4. Date has a format of string , so it's not exactly moment object, you need to construct it from the string and convert to unix format
5. If you want to input with type date you need to specify format on your schema object, otherwise it's just a text input field

You are right in your approach, there seems to be no straight forward way to do this, without adding additional widgets or fields.

Hope this helps.