想知道这段代码的都是什么意思？请帮忙解答，谢谢各位了

Question

我想知道这些代码都是什么意思？？import React from 'react'
import PropTypes from 'prop-types'
import { Form, Button, Row, Col, Input, Select, DatePicker } from 'antd'
import { FormattedMessage, injectIntl, intlShape } from 'react-intl'
import styles from 'components/GSOP/common/common.less'const { Search } = Input
const Option = Select.Option
const { RangePicker } = DatePickerconst ColProps = {
  xs: 24,
  sm: 12,
  style: {
    marginBottom: 16,
  },
}const TwoColProps = {
  ...ColProps,
  xl: 96,
}
const Filter = ({
  intl, businessTypeList,
  onFilterChange,
  filter,
  handleDeleteItems,
  handleAddItem,
  handleEnableItem,
  handleDisableItem,
  selectedCategoryRowKeys,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  },
}) => {
  const handleSubmit = () => {
    let fields = getFieldsValue()
    onFilterChange(fields)
  }  
  const handleReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }  const handleChange = (key, values) => {
    let fields = getFieldsValue()
    fields.businessType = key
    onFilterChange(fields)
  }  const {
    id, sender, recipient, status, subject, startDate, contentOfEmail, shippingStatus, businessType, category,
  } = filter
  return (
    <Row gutter={24}>
    <Col {...ColProps}  xl={18} md={18} sm={24}>
      <Col {...ColProps} xl={{ span: 6 }} md={{ span: 6 }}>
        {intl.formatMessage({ id: 'gsop.email.businessType' })}
        {getFieldDecorator('businessType', { initialValue: businessType })(<Select
          showSearch
          style={{ width: 170 }}
          placeholder={intl.formatMessage({ id: 'india.category.status' })}
          optionFilterProp="children"
          onChange={handleChange}
          filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
        >
        {
          businessTypeList && businessTypeList.map((item, index) => {
            return (
              <Option key={index} value={item.businessType}>{item.businessType}</Option>
            )
          })
        }
        </Select>)}
      </Col>
      <Col {...ColProps} xl={{ span: 6 }} md={{ span: 6 }}>
        {intl.formatMessage({ id: 'gsop.email.emailSubject' })}
        {getFieldDecorator('subject', { initialValue: subject })(<Input placeholder={intl.formatMessage({ id: 'common.input' })}  />)}
      </Col>
      <Col {...ColProps} xl={{ span: 6 }} md={{ span: 6 }}>
        {intl.formatMessage({ id: 'gsop.email.recipient' })}
        {getFieldDecorator('recipient', { initialValue: recipient })(<Input placeholder={intl.formatMessage({ id: 'common.input' })}  />)}
      </Col>
      <Col {...ColProps} xl={{ span: 6 }} md={{ span: 6 }} id="createTimeRangePicker">
        {intl.formatMessage({ id: 'gsop.email.sentTime' })}
        {getFieldDecorator('startDate')(<RangePicker style={{ width: '100%' }} showTime format="YYYY-MM-DD HH:mm:ss" />)}
      </Col>
  
      <Col {...ColProps} xl={{ span: 6 }} md={{ span: 6 }}>
        {intl.formatMessage({ id: 'gsop.email.shippingStatus' })}
        {getFieldDecorator('shippingStatus', { initialValue: shippingStatus })(<Select
          showSearch
          style={{ width: 170 }}
          placeholder={intl.formatMessage({ id: 'india.category.status' })}
          optionFilterProp="children"
          onChange={handleChange}
          filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
        >
          <Option value="">sucuess</Option>
          <Option value="">failure</Option>
        </Select>)}
      </Col>
      </Col>
      <Col {...TwoColProps}  xl={{ span: 6 }} md={{ span: 4 }} sm={{ span: 12 }}>
      <Col  className={styles.emailtBtn} style={{ textAlign: 'center' }}>
          <Button type="primary" className="margin-right" onClick={handleSubmit}><FormattedMessage id="common.list.search" /></Button>
      </Col>
      </Col>
      <div /> 
      
    </Row>
  )
}// 参数类型验证
Filter.propTypes = {
  intl: intlShape.isRequired,
  handleDeleteItems: PropTypes.func,
  handleAddItem: PropTypes.func,
  handleEnableItem: PropTypes.func,
  handleDisableItem: PropTypes.func,
  selectedCategoryRowKeys: PropTypes.array,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
  businessTypeList: PropTypes.array,
}export default Form.create()(injectIntl(Filter))

Answer 1

antd的一个表单组件，写法用了很多es6的新东西

Answer 2

import React from 'react'                                                //引入React核心框架
import PropTypes from 'prop-types'                                       //引入外接库
import { Form, Button, Row, Col, Input, Select, DatePicker } from 'antd' //按需引入组件
import { FormattedMessage, injectIntl, intlShape } from 'react-intl'     //按需引入工具类
import styles from 'components/GSOP/common/common.less'                  //引入公共css，这里先引入预编译css处理器less处理过后生成的cssconst { Search } = Input                                                //调用组件
const Option = Select.Option                                            //调用组件
const { RangePicker } = DatePicker                                      //调用组件const ColProps = {                                                      //定义栅格布局
  xs: 24,
  sm: 12,
  style: {
    marginBottom: 16,
  },
}const TwoColProps = {                                                   //在上面的栅格布局原基础上添加xl：96
  ...ColProps,
  xl: 96,
}
const Filter = ({
  intl, businessTypeList,
  onFilterChange,
  filter,
  handleDeleteItems,
  handleAddItem,
  handleEnableItem,
  handleDisableItem,
  selectedCategoryRowKeys,
  form: {
    getFieldDecorator,    
    getFieldsValue,       //获取表单里面需要提交的内容
    setFieldsValue,       //重置表单里面的内容
  },
}) => {
  const handleSubmit = () => {
    let fields = getFieldsValue()
    onFilterChange(fields) //触发事件
  }  
  const handleReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) { //循环fiellds对象里面的实例
      if ({}.hasOwnProperty.call(fields, item)) { //判断filelds里面的属性是否是自有属性，而不是继承 自有属性返回true，继承返回false
        if (fields[item] instanceof Array) { //判断fiels[item]是否是Array的实例
          fields[item] = []
        } else {
          fields[item] = undefined    
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }  const handleChange = (key, values) => {
    let fields = getFieldsValue()
    fields.businessType = key
    onFilterChange(fields)
  }  const {
    id, sender, recipient, status, subject, startDate, contentOfEmail, shippingStatus, businessType, category,
  } = filter//返回已经经过过滤的组件
  return (
    <Row gutter={24}>
    <Col {...ColProps}  xl={18} md={18} sm={24}>
      <Col {...ColProps} xl={{ span: 6 }} md={{ span: 6 }}>
        {intl.formatMessage({ id: 'gsop.email.businessType' })}
        {getFieldDecorator('businessType', { initialValue: businessType })(<Select
          showSearch
          style={{ width: 170 }}
          placeholder={intl.formatMessage({ id: 'india.category.status' })}
          optionFilterProp="children"
          onChange={handleChange}
          filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
        >
        {
          businessTypeList && businessTypeList.map((item, index) => {
            return (
              <Option key={index} value={item.businessType}>{item.businessType}</Option>
            )
          })
        }
        </Select>)}
      </Col>
      <Col {...ColProps} xl={{ span: 6 }} md={{ span: 6 }}>
        {intl.formatMessage({ id: 'gsop.email.emailSubject' })}
        {getFieldDecorator('subject', { initialValue: subject })(<Input placeholder={intl.formatMessage({ id: 'common.input' })}  />)}
      </Col>
      <Col {...ColProps} xl={{ span: 6 }} md={{ span: 6 }}>
        {intl.formatMessage({ id: 'gsop.email.recipient' })}
        {getFieldDecorator('recipient', { initialValue: recipient })(<Input placeholder={intl.formatMessage({ id: 'common.input' })}  />)}
      </Col>
      <Col {...ColProps} xl={{ span: 6 }} md={{ span: 6 }} id="createTimeRangePicker">
        {intl.formatMessage({ id: 'gsop.email.sentTime' })}
        {getFieldDecorator('startDate')(<RangePicker style={{ width: '100%' }} showTime format="YYYY-MM-DD HH:mm:ss" />)}
      </Col>
  
      <Col {...ColProps} xl={{ span: 6 }} md={{ span: 6 }}>
        {intl.formatMessage({ id: 'gsop.email.shippingStatus' })}
        {getFieldDecorator('shippingStatus', { initialValue: shippingStatus })(<Select
          showSearch
          style={{ width: 170 }}
          placeholder={intl.formatMessage({ id: 'india.category.status' })}
          optionFilterProp="children"
          onChange={handleChange}
          filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
        >
          <Option value="">sucuess</Option>
          <Option value="">failure</Option>
        </Select>)}
      </Col>
      </Col>
      <Col {...TwoColProps}  xl={{ span: 6 }} md={{ span: 4 }} sm={{ span: 12 }}>
      <Col  className={styles.emailtBtn} style={{ textAlign: 'center' }}>
          <Button type="primary" className="margin-right" onClick={handleSubmit}><FormattedMessage id="common.list.search" /></Button>
      </Col>
      </Col>
      <div /> 
      
    </Row>
  )
}// 参数类型验证
Filter.propTypes = {
  intl: intlShape.isRequired,
  handleDeleteItems: PropTypes.func,
  handleAddItem: PropTypes.func,
  handleEnableItem: PropTypes.func,
  handleDisableItem: PropTypes.func,
  selectedCategoryRowKeys: PropTypes.array,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
  businessTypeList: PropTypes.array,
}export default Form.create()(injectIntl(Filter))