mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
7.3 KiB
7.3 KiB
category | chinese | type | cols | english |
---|---|---|---|---|
Components | 表单 | Form Control | 1 | Form |
具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。
表单
我们为 form
提供了以下两种排列方式:
- 水平排列:可以实现
label
标签和表单控件的水平排列; - 行内排列:使其表现为
inline-block
级别的控件。
表单域
表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等。
这里我们分别封装了表单域 <Form.Item />
和输入控件 <Input />
。
<Form.Item {...props}>
{children}
</Form.Item>
Input 输入框
<Input {...props} />
注:标准表单中一律使用大号控件。
API
Form
更多示例参考 rc-form。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
form | 经 Form.create() 包装过的组件会自带 this.props.form 属性,直接传给 Form 即可 |
object | 无 |
horizontal | 水平排列布局 | boolean | false |
inline | 行内排列布局 | boolean | false |
onSubmit | 数据验证成功后回调事件 | Function(e:Event) | |
prefixCls | 样式类名,默认为 ant-form,通常您不需要设置 | string | 'ant-form' |
Form.create(options)
使用方式如下:
class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
options
的配置项如下。
参数 | 说明 | 类型 |
---|---|---|
onFieldsChange | 当 Form.Item 子节点的值发生改变时触发,可以把对应的值转存到 Redux store |
Function(props, fields) |
mapPropsToFields | 把 props 转为对应的值,可用于把 Redux store 中的值读出 | Function(props): Object{ fieldName: Object{ value } } |
经过 Form.create
包装的组件将会自带 this.props.form
属性,this.props.form
提供的 API 如下:
参数 | 说明 | 类型 |
---|---|---|
getFieldsValue | 获取一组输入控件的值,如不传入参数,则获取全部组件的值 | Function([fieldNames: string[]]) |
getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) |
setFieldsValue | 设置一组输入控件的值 | Function(obj: object) |
setFields | 设置一组输入控件的值与 Error | Function(obj: object) |
validateFields | 校验并获取一组输入域的值与 Error | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
validateFieldsAndScroll | 与 validateFields 相似,但校验完后,如果校验不通过的菜单域不在可见范围内,则自动滚动进可见范围 |
参考 validateFields |
getFieldError | 获取某个输入控件的 Error | Function(name) |
isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) |
resetFields | 重置一组输入控件的值与状态,如不传入参数,则重置所有组件 | Function([names: string[]]) |
getFieldProps | 用于和表单进行双向绑定,详见下方描述 |
this.props.form.getFieldProps(id, options)
特别注意
getFieldProps
调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534
getFieldProps
返回的属性包括 id
、value
(或你设置的其它 valuePropName
)、ref
、onChange
(或者你设置的其它 trigger
validateTrigger
),所以不应再设置同样的属性,以免冲突。如果对其返回值的细节有兴趣,可以 console.log
出来查看。
在表单中
defaultValue
也不应该被设置,请使用下面的initialValue
。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
options.id | 必填输入控件唯一标志 | string | |
options.valuePropName | 子节点的值的属性,如 Switch 的是 'checked' | string | 'value' |
options.initialValue | 子节点的初始值,类型、可选值均由子节点决定 | ||
options.trigger | 收集子节点的值的时机 | string | 'onChange' |
options.validateTrigger | 校验子节点值的时机 | string | 'onChange' |
options.rules | 校验规则,参见 async-validator | array | |
options.onXXX | 由于 getFieldProps 会占用 onChange 等事件(即你所设置的 trigger validateTrigger ),所以如果仍需绑定事件,请在 options 内设置 |
function | 无 |
Form.Item
一个 Form.Item 建议只放一个 child,有多个 child 时,
help
required
validateStatus
无法自动生成。
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | label 标签的文本 | string | ||
labelCol | label 标签布局,通 <Col> 组件,设置 span offset 值,如 {span: 3, offset: 12} |
object | ||
wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | object | ||
help | 提示信息,如不设置,则会根据校验规则自动生成 | string | ||
extra | 额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。 | string | ||
required | 是否必填,如不设置,则会根据校验规则自动生成 | bool | false | |
validateStatus | 校验状态,如不设置,则会根据校验规则自动生成 | string | 'success' 'warning' 'error' 'validating' | |
hasFeedback | 配合 validateStatus 属性使用,是否展示校验状态图标 | bool | false | |
prefixCls | 样式类名,默认为 ant-form,通常您不需要设置 | string | 'ant-form' |
Input
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 【必须】声明 input 类型,同原生 input 标签的 type 属性 | string | 'text' | |
id | id | number 或 string | ||
value | value 值 | any | ||
defaultValue | 设置初始默认值 | any | ||
size | 控件大小,默认值为 default 。注:标准表单内的输入框大小限制为 large。 | string | {'large','default','small'} | 'default' |
disabled | 是否禁用状态,默认为 false | bool | false | |
addonBefore | 带标签的 input,设置前置标签 | node | ||
addonAfter | 带标签的 input,设置后置标签 | node | ||
onPressEnter | 按下回车的回调 | function(e) |
如果
Input
在Form.Item
内,并且Form.Item
设置了id
和options
属性,则value
defaultValue
和id
属性会被自动设置。
Input.Group
<Input.Group className={string}>
<Input />
<Input />
</Input.Group>