From d0ad1b4b0a6d139e76f8933d62a9244bf8707478 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 12 Apr 2016 17:02:17 +0800 Subject: [PATCH] docs: update docs for Form --- components/form/demo/dynamic-form-item.md | 76 +++++++++++++++++++++++ components/form/index.md | 64 +++++++++---------- 2 files changed, 108 insertions(+), 32 deletions(-) create mode 100644 components/form/demo/dynamic-form-item.md diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md new file mode 100644 index 0000000000..b8423c86c7 --- /dev/null +++ b/components/form/demo/dynamic-form-item.md @@ -0,0 +1,76 @@ +--- +order: 15 +title: 动态增减表单项 +--- + +动态增加、减少表单项。 + +````jsx +import { Form, Input, Button } from 'antd'; + +let uuid = 0; +let Demo = React.createClass({ + remove(k) { + const { form } = this.props; + // can use data-binding to get + let keys = form.getFieldValue('keys'); + keys = keys.filter((key) => { + return key !== k; + }); + // can use data-binding to set + form.setFieldsValue({ + keys, + }); + }, + add() { + uuid++; + const { form } = this.props; + // can use data-binding to get + let keys = form.getFieldValue('keys'); + keys = keys.concat(uuid); + // can use data-binding to set + // important! notify form to detect changes + form.setFieldsValue({ + keys, + }); + }, + submit(e) { + e.preventDefault(); + console.log(this.props.form.getFieldsValue()); + }, + render() { + const { getFieldProps, getFieldValue } = this.props.form; + getFieldProps('keys', { + initialValue: [0], + }); + + const formItemLayout = { + labelCol: { span: 6 }, + wrapperCol: { span: 18 }, + }; + + const formItems = getFieldValue('keys').map((k) => { + return ( + + + + + ); + }); + return ( +
+ { formItems } + + +   + + +
+ ); + }, +}); + +Demo = Form.create()(Demo); + +ReactDOM.render(, mountNode); +```` diff --git a/components/form/index.md b/components/form/index.md index f41c0a6b9b..f9b4b6e808 100644 --- a/components/form/index.md +++ b/components/form/index.md @@ -42,13 +42,13 @@ english: Form 更多示例参考 [rc-form](http://react-component.github.io/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 | 经 `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) @@ -62,25 +62,25 @@ CustomizedForm = Form.create({})(CustomizedForm); `options` 的配置项如下。 -| 参数 | 说明 | 类型 | 可选值 |默认值 | -|-----------|------------------------------------------|------------|-------|--------| -| onFieldsChange | 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) | | | -| mapPropsToFields | 把 props 转为对应的值，可用于把 Redux store 中的值读出 | Function(props): Object{ fieldName: Object{ value } } | | | | +| 参数 | 说明 | 类型 | +|-----------|------------------------------------------|------------| +| 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 | 用于和表单进行双向绑定，详见下方描述 | | | | | +| 参数 | 说明 | 类型 | +|-----------|------------------------------------------|------------| +| 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) @@ -88,15 +88,15 @@ CustomizedForm = Form.create({})(CustomizedForm); > 在表单中 `defaultValue` 也不应该被设置，请使用下面的 `initialValue`。 -| 参数 | 说明 | 类型 | 可选值 |默认值 | -|-----------|------------------------------------------|------------|-------|--------| -| options.id | 必填输入控件唯一标志 | string | | | -| options.valuePropName | 子节点的值的属性，如 Checkbox 的是 'checked' | string | | 'value' | -| options.initialValue | 子节点的初始值，类型、可选值均由子节点决定 | | | | -| options.trigger | 收集子节点的值的时机 | string | | 'onChange' | -| options.validateTrigger | 校验子节点值的时机 | string | | 'onChange' | -| options.rules | 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) | array | | | -| options.onXXX | 由于 `getFieldProps` 会占用 `onChange` 等事件（即你所设置的 `trigger` `validateTrigger`），所以如果仍需绑定事件，请在 `options` 内设置 | function | | 无 | +| 参数 | 说明 | 类型 |默认值 | +|-----------|-----------------------------------------|-----|--------| +| options.id | 必填输入控件唯一标志 | string | | +| options.valuePropName | 子节点的值的属性，如 Checkbox 的是 'checked' | string | 'value' | +| options.initialValue | 子节点的初始值，类型、可选值均由子节点决定 | | | +| options.trigger | 收集子节点的值的时机 | string | 'onChange' | +| options.validateTrigger | 校验子节点值的时机 | string | 'onChange' | +| options.rules | 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) | array | | +| options.onXXX | 由于 `getFieldProps` 会占用 `onChange` 等事件（即你所设置的 `trigger` `validateTrigger`），所以如果仍需绑定事件，请在 `options` 内设置 | function | 无 | ### Form.Item