Javascript 是否可以在发送Ant设计范围选择器数据之前对其进行操作？

使用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": ["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;
}

---

谢谢

您需要在提交之前格式化rangedate，希望此代码示例能够解决您的问题

我完全复制了您的代码，只需检查handlesubmit函数中的逻辑，并对代码进行相应的更改

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'));

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'));