docs: update docs for Form

9 years ago · d0ad1b4b0a
2 changed files with 108 additions and 32 deletions
--- a/components/form/demo/dynamic-form-item.md
+++ 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 (
+        <Form.Item {...formItemLayout} label={`好朋友${k}：`} key={k}>
+          <Input {...getFieldProps(`name${k}`)} style={{ width: '80%', marginRight: 10 }} />
+          <Button onClick={() => this.remove(k)}>删除</Button>
+        </Form.Item>
+      );
+    });
+    return (
+      <Form horizontal form={this.props.form}>
+        { formItems }
+        <Form.Item wrapperCol={{ span: 18, offset: 6 }}>
+          <Button onClick={this.add}>新增好朋友</Button>
+          &nbsp;
+          <Button type="primary" onClick={this.submit}>提交</Button>
+        </Form.Item>
+      </Form>
+    );
+  },
+});
+
+Demo = Form.create()(Demo);
+
+ReactDOM.render(<Demo />, mountNode);
+````
--- 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