在发送之前可以操纵“蚂蚁设计范围选择器”数据吗？

时间：2018-08-21 15:38:07

标签： javascript reactjs antd

我使用Ant Design Range Picker组件具有以下形式：

<Form layout='inline' onSubmit={(e) => this.handleSubmit(e)}>
  <Form.Item>
    <RangePicker name='rangeDate' />
  </Form.Item>
  <Form.Item>
    <Input name='channel' placeholder='Type a channel' />
  </Form.Item>
  <Form.Item>
    <Button type='primary' htmlType='submit' >
      {this.props.buttonLabel}
    </Button>
  </Form.Item>
</Form>

提交表单后，我得到的答案是：

{
  "channel": "Testing",
  "rangeDate": [
    {
      "_isAMomentObject": true,
      "_isUTC": false,
      "_pf": {
        "empty": false,
        "unusedTokens": [],
        "unusedInput": [],
        "overflow": -2,
        "charsLeftOver": 0,
        "nullInput": false,
        "invalidMonth": null,
        "invalidFormat": false,
        "userInvalidated": false,
        "iso": false,
        "parsedDateParts": [],
        "meridiem": null,
        "rfc2822": false,
        "weekdayMismatch": false
      },
      "_locale": {
        "_calendar": {
          "sameDay": "[Today at] LT",
          "nextDay": "[Tomorrow at] LT",
          "nextWeek": "dddd [at] LT",
          "lastDay": "[Yesterday at] LT",
          "lastWeek": "[Last] dddd [at] LT",
          "sameElse": "L"
        },
        "_longDateFormat": {
          "LTS": "h:mm:ss A",
          "LT": "h:mm A",
          "L": "MM/DD/YYYY",
          "LL": "MMMM D, YYYY",
          "LLL": "MMMM D, YYYY h:mm A",
          "LLLL": "dddd, MMMM D, YYYY h:mm A"
        },
        "_invalidDate": "Invalid date",
        "_dayOfMonthOrdinalParse": {},
        "_relativeTime": {
          "future": "in %s",
          "past": "%s ago",
          "s": "a few seconds",
          "ss": "%d seconds",
          "m": "a minute",
          "mm": "%d minutes",
          "h": "an hour",
          "hh": "%d hours",
          "d": "a day",
          "dd": "%d days",
          "M": "a month",
          "MM": "%d months",
          "y": "a year",
          "yy": "%d years"
        },
        "_months": [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        "_monthsShort": [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec"
        ],
        "_week": {
          "dow": 0,
          "doy": 6
        },
        "_weekdays": [
          "Sunday",
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday"
        ],
        "_weekdaysMin": [
          "Su",
          "Mo",
          "Tu",
          "We",
          "Th",
          "Fr",
          "Sa"
        ],
        "_weekdaysShort": [
          "Sun",
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
          "Sat"
        ],
        "_meridiemParse": {},
        "_abbr": "en",
        "_config": {
          "calendar": {
            "sameDay": "[Today at] LT",
            "nextDay": "[Tomorrow at] LT",
            "nextWeek": "dddd [at] LT",
            "lastDay": "[Yesterday at] LT",
            "lastWeek": "[Last] dddd [at] LT",
            "sameElse": "L"
          },
          "longDateFormat": {
            "LTS": "h:mm:ss A",
            "LT": "h:mm A",
            "L": "MM/DD/YYYY",
            "LL": "MMMM D, YYYY",
            "LLL": "MMMM D, YYYY h:mm A",
            "LLLL": "dddd, MMMM D, YYYY h:mm A"
          },
          "invalidDate": "Invalid date",
          "dayOfMonthOrdinalParse": {},
          "relativeTime": {
            "future": "in %s",
            "past": "%s ago",
            "s": "a few seconds",
            "ss": "%d seconds",
            "m": "a minute",
            "mm": "%d minutes",
            "h": "an hour",
            "hh": "%d hours",
            "d": "a day",
            "dd": "%d days",
            "M": "a month",
            "MM": "%d months",
            "y": "a year",
            "yy": "%d years"
          },
          "months": [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
          ],
          "monthsShort": [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec"
          ],
          "week": {
            "dow": 0,
            "doy": 6
          },
          "weekdays": [
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday"
          ],
          "weekdaysMin": [
            "Su",
            "Mo",
            "Tu",
            "We",
            "Th",
            "Fr",
            "Sa"
          ],
          "weekdaysShort": [
            "Sun",
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
            "Sat"
          ],
          "meridiemParse": {},
          "abbr": "en"
        },
        "_dayOfMonthOrdinalParseLenient": {}
      },
      "_d": "2018-08-06T15:20:10.948Z",
      "_isValid": true
    },
    {
      "_isAMomentObject": true,
      "_isUTC": false,
      "_pf": {
        "empty": false,
        "unusedTokens": [],
        "unusedInput": [],
        "overflow": -2,
        "charsLeftOver": 0,
        "nullInput": false,
        "invalidMonth": null,
        "invalidFormat": false,
        "userInvalidated": false,
        "iso": false,
        "parsedDateParts": [],
        "meridiem": null,
        "rfc2822": false,
        "weekdayMismatch": false
      },
      "_locale": {
        "_calendar": {
          "sameDay": "[Today at] LT",
          "nextDay": "[Tomorrow at] LT",
          "nextWeek": "dddd [at] LT",
          "lastDay": "[Yesterday at] LT",
          "lastWeek": "[Last] dddd [at] LT",
          "sameElse": "L"
        },
        "_longDateFormat": {
          "LTS": "h:mm:ss A",
          "LT": "h:mm A",
          "L": "MM/DD/YYYY",
          "LL": "MMMM D, YYYY",
          "LLL": "MMMM D, YYYY h:mm A",
          "LLLL": "dddd, MMMM D, YYYY h:mm A"
        },
        "_invalidDate": "Invalid date",
        "_dayOfMonthOrdinalParse": {},
        "_relativeTime": {
          "future": "in %s",
          "past": "%s ago",
          "s": "a few seconds",
          "ss": "%d seconds",
          "m": "a minute",
          "mm": "%d minutes",
          "h": "an hour",
          "hh": "%d hours",
          "d": "a day",
          "dd": "%d days",
          "M": "a month",
          "MM": "%d months",
          "y": "a year",
          "yy": "%d years"
        },
        "_months": [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        "_monthsShort": [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec"
        ],
        "_week": {
          "dow": 0,
          "doy": 6
        },
        "_weekdays": [
          "Sunday",
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday"
        ],
        "_weekdaysMin": [
          "Su",
          "Mo",
          "Tu",
          "We",
          "Th",
          "Fr",
          "Sa"
        ],
        "_weekdaysShort": [
          "Sun",
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
          "Sat"
        ],
        "_meridiemParse": {},
        "_abbr": "en",
        "_config": {
          "calendar": {
            "sameDay": "[Today at] LT",
            "nextDay": "[Tomorrow at] LT",
            "nextWeek": "dddd [at] LT",
            "lastDay": "[Yesterday at] LT",
            "lastWeek": "[Last] dddd [at] LT",
            "sameElse": "L"
          },
          "longDateFormat": {
            "LTS": "h:mm:ss A",
            "LT": "h:mm A",
            "L": "MM/DD/YYYY",
            "LL": "MMMM D, YYYY",
            "LLL": "MMMM D, YYYY h:mm A",
            "LLLL": "dddd, MMMM D, YYYY h:mm A"
          },
          "invalidDate": "Invalid date",
          "dayOfMonthOrdinalParse": {},
          "relativeTime": {
            "future": "in %s",
            "past": "%s ago",
            "s": "a few seconds",
            "ss": "%d seconds",
            "m": "a minute",
            "mm": "%d minutes",
            "h": "an hour",
            "hh": "%d hours",
            "d": "a day",
            "dd": "%d days",
            "M": "a month",
            "MM": "%d months",
            "y": "a year",
            "yy": "%d years"
          },
          "months": [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
          ],
          "monthsShort": [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec"
          ],
          "week": {
            "dow": 0,
            "doy": 6
          },
          "weekdays": [
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday"
          ],
          "weekdaysMin": [
            "Su",
            "Mo",
            "Tu",
            "We",
            "Th",
            "Fr",
            "Sa"
          ],
          "weekdaysShort": [
            "Sun",
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
            "Sat"
          ],
          "meridiemParse": {},
          "abbr": "en"
        },
        "_dayOfMonthOrdinalParseLenient": {}
      },
      "_d": "2018-08-23T15:20:10.948Z",
      "_isValid": true
    }
  ]
}

那么，我该如何操纵该结果以所需的方式对其进行更改？ 我希望能够将这个结果转换成这样的东西：

{
  "channel": "Testing",
  "rangeDate": ["2018-01-01", "2018-01-10"]
}

我正在动态创建表单，因为该应用程序将具有多个表单。我的示例配置创建表单：

const fields = [
  {
    name: 'rangeDate',
    errorMessage: 'Please fill the dates',
    required: true,
    field: <RangePicker format='YYYY-MM-DD' onChange={ (date, dateString) => console.log(date, dateString) } />
  },
  {
    name: 'channel',
    errorMessage: 'Please fill the channel',
    required: true,
    field: <Input placeholder='Channel' />
  }
];

使用上面的fields变量，我可以仅使用for进行迭代来创建表单：

getFields () {
  const formItems = [],
        { getFieldDecorator } = this.props.form;

  for(let i = 0; i < fields.length; i++) {
    const formItem = fields[i];
    formItems.push(
      <FormItem key={i}>
        {
          getFieldDecorator(formItem.name, {
            rules: [{
              required: formItem.required,
              message: formItem.errorMessage
            }]
          })(
            formItem.field
          )
        }
      </FormItem>
    );
  }

  return formItems;
}

谢谢！

1 个答案:

答案 0 :(得分：1)

您需要在提交之前格式化范围日期，希望这段代码示例可以解决您的问题。

我已经完全复制了您的代码，只需检查handle提交函数中的逻辑并相应地对您的代码进行更改。

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, DatePicker, TimePicker, Button, Input } from 'antd';

const FormItem = Form.Item;
const MonthPicker = DatePicker.MonthPicker;
const RangePicker = DatePicker.RangePicker;

class TimeRelatedForm extends React.Component {

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      // Should format date value before submit.
      const rangeValue = fieldsValue['rangeDate'];
      const values = {
        ...fieldsValue,
        'rangeDate': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],

      };
      console.log('Received values of form: ', values);
    });
  }



  getFields() {
    const fields = [
      {
        name: 'rangeDate',
        errorMessage: 'Please fill the dates',
        required: true,
        field: <RangePicker format='YYYY-MM-DD' onChange={(date, dateString) => console.log(date, dateString)} />
      },
      {
        name: 'channel',
        errorMessage: 'Please fill the channel',
        required: true,
        field: <Input placeholder='Channel' />
      }
    ];
    const formItems = [],
      { getFieldDecorator } = this.props.form;

    for (let i = 0; i < fields.length; i++) {
      const formItem = fields[i];
      formItems.push(
        <FormItem key={i}>
          {
            getFieldDecorator(formItem.name, {
              rules: [{
                required: formItem.required,
                message: formItem.errorMessage
              }]
            })(
              formItem.field
            )
          }
        </FormItem>
      );
    }
    return formItems;
  }



  render() {
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
        {this.getFields()}
          <FormItem
            wrapperCol={{
              xs: { span: 24, offset: 0 },
              sm: { span: 16, offset: 8 },
            }}
          >
            <Button type="primary" htmlType="submit">Submit</Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}

const WrappedTimeRelatedForm = Form.create()(TimeRelatedForm);

ReactDOM.render(<WrappedTimeRelatedForm />, document.getElementById('container'));
相关问题
最新问题