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

[一只懒惰的猫]

我想知道这些代码都是什么意思？？

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 } = DatePicker

const 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))

[丰云]

这么长。。。你是认真的吗？？？？ 还是找你的老师去吧。。。。

[風灬雲]

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

[Bao_Ge_CCQ]

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处理过后生成的css const { 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))