antd笔记

const { getFieldDecorator, getFieldValue, setFieldsValue, resetFields, validateFields, getFieldError } = this.props.form;

getFieldDecorator:

用于和表单进行双向绑定

getFieldDecorator(id, options) 参数

id

必填输入控件唯一标志。支持嵌套式的写法。string

options.getValueFromEvent
可以把 onChange 的参数（如 event）转化为控件的值

function(..args)

<FormItem>
商品名称:
	{getFieldDecorator('itemName', {
		initialValue: undefined,
		getValueFromEvent: (e) => e.target.value.trim(),
		rules: [
			{ required: false },
		],
	})(
		<Input placeholder='请输入商品名称' style={{  200, marginLeft: '10px' }} allowClear />
	)}
</FormItem>

options.initialValue

子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 === 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量)

options.normalize

转换默认的 value 给控件，一个选择全部的例子

function(value, prevValue, allValues): any

options.preserve

即便字段不再使用，也保留该字段的值

boolean

options.rules

object[]

options.trigger

收集子节点的值的时机

string

'onChange'

{
                  getFieldDecorator(`content.configContentList[${index}].config`, {
                              initialValue: getUrlParam2('id') ?
                                configContentList && configContentList[index] && configContentList[index].configType == item.value :
                                true,
                              trigger: "onChange",
                              valuePropName: 'checked',
                              rules: [{
                                required: true,
                                message: '请选择配置内容',
                              }]
                            })(
                              <Checkbox onChange={this.honChangeChecked.bind(this, index, item)} key={index}>{item.name}</Checkbox>
                            )
                          }

options.validateFirst

当某一规则校验不通过时，是否停止剩下的规则的校验

boolean
false

<Form.Item label='线下活动名称' {...formLayout}>
                {
                  getFieldDecorator('jiZanPromotionConfigDTO.offActName', {
                    initialValue: (jiZanPromotionConfigDTO || {}).offActName,
                    validateFirst: true,
                    rules: [{
                      required: true, message: '请输入线下活动名称',
                    }, {
                      max: 8, min: 2, message: '线下活动名称2-8个字'
                    }]
                  })(
                    <Input disabled={promotionDisabled} type='text' placeholder='线下活动名称2-8个字' maxLength={8} style={{  '200px' }} />
                  )
                }
              </Form.Item>

options.validateTrigger

校验子节点值的时机
string|string[]

<FormItem label="菜单页名称" {...formItemLayout}>
            {getFieldDecorator("pageName", {
              initialValue: detailModel ? detailModel.pageName : '',
              validateTrigger: "onBlur", //  validateTrigger: ['onSubmit', 'onChange'],
              rules: [
                { required: true, message: "请输入菜单页名称" }
              ]
            })(
              <Input placeholder="请输入菜单名称" ></Input>
            )}
          </FormItem>

options.valuePropName

子节点的值的属性，如 Switch 的是 'checked' string

<FormItem label="开启筛选" {...formItemLayout}>
          {getFieldDecorator('showSwitch', {
            initialValue: !!details.search || false,
            valuePropName: 'checked'
          })(<Switch />)}
        </FormItem>

{getFieldDecorator('goodsCode', {	
	initialValue: '',
})(
	<Input
		onChange={({ target }) => {
			target.value = target.value.replace(/，/g, ',');
		}}
		placeholder="支持商品编码 商品名称 通用名搜索"
	/>
)}

<Form.Item label="抽奖类型" {...formLayout}>
    {getFieldDecorator('materialConfigDTO.activityType', {
                        initialValue: materialConfigDTO.activityType ? materialConfigDTO.activityType : 1,
                        rules: [
                        {
                        required: true,
                        message: '请选择抽奖类型'
                        }
    ]
    })(
        <Select
        style={{  300 }}
        disabled={!canEdit || Boolean(getUrlParam2('id'))}
        onChange={() =>
        setFieldsValue({
        'materialConfigDTO.activityName': undefined,
        'materialConfigDTO.activityMode': 0
    })
}
    >
        <Select.Option value={1}>普通抽奖</Select.Option>
<Select.Option value={4}>积分抽奖</Select.Option>
<Select.Option value={8}>红包雨</Select.Option>
</Select>
)}
    </Form.Item>

getFieldError

获取某个输入控件的 Error Function(name)

validator: (rule, value, callback) => {
                          if (getFieldValue('endTime') && moment(getFieldValue('endTime')).isBefore(value)) {
                            callback('活动开始时间必须早于结束时间');
                            return;
                          }
                          if (getFieldError('endTime')) {
                            validateFields(['endTime'], { force: true })
                          }
                          callback();
                        }

<FormItem style={{ margin: 0 }}>
                  {getFieldDecorator(`refundAmount${record.detailId}${index}`, {
                    rules: [
                      {
                        validator: this.checkRefundAmount.bind(this, index),
                      },
                    ],
                    initialValue: 0,
                  })(
                    <Input
                      style={{  '60px' }}
                      onChange={this.changeRefundAmount.bind(this, index, record)}
                      ref={ref => {
                        const str = `priceInput${index}`;
                        this[str] = ref;
                      }}
                      type="number"
                      disabled={
                        getFieldError(`refundCount${record.detailId}${index}`) ||
                        getFieldValue(`refundCount${record.detailId}${index}`) == 0
                      }
                    />,
                  )}
                </FormItem>

getFieldsError

获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error Function([names: string[]])

<Button
  size="large"
  type="primary"
  disabled={hasErrors(this.props.form.getFieldsError())}
  onClick={() => this.nextStep(false)}
>
  下一步
</Button>

getFieldsValue

获取一组输入控件的值，如不传入参数，则获取全部组件的值 Function([fieldNames: string[]])

this.props.form.getFieldsValue();

getFieldValue

获取一个输入控件的值 Function(fieldName: string)

{getFieldValue('materialConfigDTO.activityType') !== 8 && (
    <Form.Item label="活动形式" {...formLayout}>
    {getFieldDecorator('materialConfigDTO.activityMode', {
                        initialValue: materialConfigDTO.activityMode,
                        rules: [
                            {
                                required: true,
                                message: '请选择活动形式'
                            }
    					]
    })(
        <Radio.Group disabled={!canEdit}>
            <Radio value={0}>转盘式</Radio>
            <Radio value={1}>xxx式</Radio>
		</Radio.Group>
	)}
    </Form.Item>
)}

isFieldsTouched

判断是否任一输入控件经历过 getFieldDecorator 的值收集时机 options.trigger

(names?: string[]) => boolean

isFieldTouched

判断一个输入控件是否经历过 getFieldDecorator 的值收集时机 options.trigger

(name: string) => boolean

isFieldValidating

判断一个输入控件是否在校验状态 Function(name)

resetFields

重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件

Function([names: string[]])

const { form } = this.props;
form.resetFields();
form.resetFields(['integralSillValue']);
form.resetFields(['goodNo', []]);

setFields

设置一组输入控件的值与错误状态：代码

({ [fieldName]: {value: any, errors: [Error] } }) => void

setFieldsValue

设置一组输入控件的值（注意：不要在 componentWillReceiveProps 内使用，否则会导致死循环，原因）( { [fieldName]: value }, callback: Function ) => void

const { getFieldValue, setFieldsValue } = this.props.form;
    const dataSource = getFieldValue('name');
    setFieldsValue({
      name: dataSource,
    });

setFieldsValue({
        'materialConfigDTO.activityName': undefined,
        'materialConfigDTO.activityMode': 0
    })

validateFields

校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件

(
  [fieldNames: string[]],
  [options: object],
  callback(errors, values)
) => void

errors:

{
  "username": {
    "errors": [
      {
        "message": "Please input your username!",
        "field": "username"
      }
    ]
  },
  "password": {
    "errors": [
      {
        "message": "Please input your Password!",
        "field": "password"
      }
    ]
  }
}

values:

{
  "username": "username",
  "password": "password",
}

this.props.form.validateFields((err, values) => {
    if (!err) {
// ...
    }
})

this.props.form.validateFields(['timesDate', 'applyLevel', 'platformId', 'businessId'], (err, values) => {
      if (!err) {
// ...
    }
})

validateFieldsAndScroll

与 validateFields 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围

参考 validateFields

const {
  form: { validateFields },
} = this.props;
validateFields((errors, values) => {
  // ...
});
validateFields(['field1', 'field2'], (errors, values) => {
  // ...
});
validateFields(['field1', 'field2'], options, (errors, values) => {
  // ...
});

其中options可配置：

options.first

若为 true，则每一表单域的都会在碰到第一个失败了的校验规则后停止校验

options.firstFields

指定表单域会在碰到第一个失败了的校验规则后停止校验

options.force

对已经校验过的表单域，在 validateTrigger 再次被触发时是否再次校验

options.scroll

定义 validateFieldsAndScroll 的滚动行为，详细配置见 dom-scroll-into-view config

Form.Item

colon

配合 label 属性使用，表示是否显示 label 后面的冒号

extra

额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。

<FormItem label='宣传图片' {...formLayout} extra='支持格式：png、jpg、jpeg不大于1M;推荐图片尺寸：800px*800px'>

hasFeedback

help

help={'xxxxxxxxxxxxxxxxxxxx'}

htmlFor

设置子元素 label htmlFor 属性

<List.Item style={{ position: 'relative' }}>
                      <label
                        htmlFor={String(item.id)}
                        style={{
                          display: 'block',
                           '100%',
                          height: 100,
                          lineHeight: '100px',
                          textAlign: 'center',
                          color: '#ccc',
                          cursor: item.enable ? 'pointer' : 'not-allowed'
                        }}
                      >
                        {item.picUrl ? (
                          <img
                            style={{  '100%', height: '100%' }}
                            alt="奖品"
                            src={item.picUrl}
                          />
                        ) : (
                          '暂无图片'
                        )}
                      </label>
                      <div
                        style={{
                          textAlign: 'center',
                          textOverflow: 'ellipsis',
                          overflow: 'hidden'
                        }}
                      >
                        <Radio disabled={!item.enable} id={String(item.id)} value={item.id}>
                          {item.name}
                        </Radio>
                      </div>
                    </List.Item>

labelCol

wrapperCol

const tailItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 },
  },
};

labelAlign

required

validateStatus

// 验证模板名称
  validatePrimeName = (value) => {
    if (value != '' && value.length > 1) {
      return {
        validateStatus: 'success',
        errorMsg: null,
      };
    }
    return {
      validateStatus: 'error',
      errorMsg: '请输入模板名称,2-25个字',
    };
  }

validator

自定义校验（注意，callback 必须被调用）

function(rule, value, callback)

validatorStores = (storesArrType, msg, rule, value, callback) => {
    const arr = this.state[storesArrType] || [];
    if (value == 2 && arr.length == 0) {
      callback(msg);
    } else {
      callback();
    }
  };

storeRadio = (e, key, valid, msg) => {
    if (e.target.value == 1) {
      this.setState({
        [key]: [],
        [valid + 'ValidateStatus']: '',
        [valid + 'ErrorMsg']: null,
      });
    } else if (e.target.value == 2) {
      this.setState({
        [valid + 'ValidateStatus']: 'error',
        [valid + 'ErrorMsg']: msg,
      });
    }
  }
  
  ...
  
{getFieldDecorator('activateStore.status', {
                initialValue: 1,
                rules: [
                  {
                    validator: this.validatorStores.bind(
                      this,
                      'activateStoreArr',
                      '请选择线上领卡门店'
                    )
                  }
                ]
              })(
                <RadioGroup
                  onChange={e =>
                    this.props.storeRadio(
                      e,
                      'activateStoreArr',
                      'activateStore.status',
                      '请选择线上领卡门店'
                    )
                  }
                >
                  <Radio value={1}>全部门店</Radio>
                  <Radio value={2}>部分门店</Radio>
                </RadioGroup>
              )}

pattern

正则表达式校验

<FormItem label="收货人姓名" {...formItemLayout}>
                      {getFieldDecorator('buyerFullName', {
                        initialValue: orderInfo.buyerFullName || '',
                        rules: [
                          {
                            pattern: /^.{1,20}$/,
                            message: '收货人姓名最多支持20位字符'
                          },
                          {
                            required: true,
                            message: '请填写收货人姓名'
                          }
                        ]
                      })(
                        <Input
                          onChange={this.checkFullNameBlankSpace.bind(this)}
                          placeholder="请填写收货人姓名"
                          onKeyUp={e => {
                            e.target.value = e.target.value.replace(/\s+/g, '');
                          }}
                          disabled={notChange}
                        />
                      )}
                    </FormItem>

whitespace

必选时，空格是否会被视为错误

{ required: true, whitespace: true, message: '请输入页面标题' },

getDefaultProps

object getDefaultProps()

执行过一次后，被创建的类会有缓存，映射的值会存在this.props,前提是这个prop不是父组件指定的
这个方法在对象被创建之前执行，因此不能在方法内调用this.props ，另外，注意任何getDefaultProps()返回的对象在实例中共享，不是复制

getInitialState

object getInitialState()

控件加载之前执行，返回值会被用于state的初始化值

componentWillMount

void componentWillMount()

执行一次，在初始化render之前执行，如果在这个方法内调用setState，render()知道state发生变化，并且只执行一次

render

ReactElement render()

render的时候会调用render()会被调用
调用render()方法时，首先检查this.props和this.state返回一个子元素，子元素可以是DOM组件或者其他自定义复合控件的虚拟实现
如果不想渲染可以返回null或者false，这种场景下，React渲染一个<noscript>标签，当返回null或者false时，ReactDOM.findDOMNode(this)返回null
render()方法是很纯净的，这就意味着不要在这个方法里初始化组件的state，每次执行时返回相同的值，不会读写DOM或者与服务器交互，如果必须如服务器交互，在componentDidMount()方法中实现或者其他生命周期的方法中实现，保持render()方法纯净使得服务器更准确，组件更简单

componentDidMount

void componentDidMount()

在初始化render之后只执行一次，在这个方法内，可以访问任何组件，componentDidMount()方法中的子组件在父组件之前执行

从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时 setTimeout 或者 setInterval，或者发起网络请求

shouldComponentUpdate

boolean shouldComponentUpdate(
  object nextProps, object nextState
)

这个方法在初始化render时不会执行，当props或者state发生变化时执行，并且是在render之前，当新的props或者state不需要更新组件时，返回false

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

当shouldComponentUpdate方法返回false时，讲不会执行render()方法，componentWillUpdate和componentDidUpdate方法也不会被调用

默认情况下，shouldComponentUpdate方法返回true防止state快速变化时的问题，但是如果·state不变，props只读，可以直接覆盖shouldComponentUpdate用于比较props和state的变化，决定UI是否更新，当组件比较多时，使用这个方法能有效提高应用性能

componentWillUpdate

void componentWillUpdate(
  object nextProps, object nextState
)

当props和state发生变化时执行，并且在render方法之前执行，当然初始化render时不执行该方法，需要特别注意的是，在这个函数里面，你就不能使用this.setState来修改状态。这个函数调用之后，就会把nextProps和nextState分别设置到this.props和this.state中。紧接着这个函数，就会调用render()来更新界面了

componentDidUpdate

void componentDidUpdate(
  object prevProps, object prevState
)

组件更新结束之后执行，在初始化render时不执行

componentWillReceiveProps

void componentWillReceiveProps(
  object nextProps
)

当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的，并不会触发额外的render调用

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

componentWillUnmount

void componentWillUnmount()

当组件要被从界面上移除的时候，就会调用componentWillUnmount(),在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等

建议只有在componentWillMount,componentDidMount,componentWillReceiveProps方法中可以修改state值

Input

addonBefore

带标签的 input，设置前置标签

addonAfter

带标签的 input，设置后置标签

string|ReactNode

defaultValue

输入框默认内容

string

<Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />

disabled

是否禁用状态，默认为 false

id输入框的 id

maxLength最大长度

prefix

带有前缀图标的 input

suffix

带有后缀图标的 input

string|ReactNode

<Input
      placeholder="Enter your username"
      prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
      suffix={
        <Tooltip title="Extra information">
          <Icon type="info-circle" style={{ color: 'rgba(0,0,0,.45)' }} />
        </Tooltip>
      }
    />

onChange

输入框内容变化时的回调

onPressEnter

按下回车的回调

allowClear

可以点击清除图标删除内容

Select

labelInValue

是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 {key: string, label: ReactNode} 的格式

notFoundContent

当下拉列表为空时显示的内容

showArrow

是否显示下拉小箭头

allowClear

支持清除

autoClearSearchValue

是否在选中项后清空搜索框，只在 mode 为 multiple 或 tags 时有效。

autoFocus

默认获取焦点

defaultActiveFirstOption

是否默认高亮第一个选项。

firstActiveValue

默认高亮的选项

string|string[]

dropdownMatchSelectWidth

下拉菜单和选择器同宽

dropdownRender

自定义下拉框内容

onSelect

被选中时调用，参数为选中项的 value (或 key) 值

function(string|number|LabeledValue, option:Option)

onDeselect

取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效

function(string|number|LabeledValue)

onSearch

文本框值变化时回调

filterOption

是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。

showSearch

使单选模式可搜索

onFocus

获得焦点时回调

onBlur

失去焦点时回调

onChange

选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数

function(value, option:Option/Array)

suffixIcon

自定义的选择框后缀图标

removeIcon

自定义的多选框清除图标

clearIcon

自定义的多选框清空图标

menuItemSelectedIcon

自定义多选时当前选中的条目图标