Browse Source

docs: Update dynamic-form-items.md (#29807)

* Update dynamic-form-items.md

原来的代码只有在使用Space包裹多个Form.Item的时候可以跑起来,如果把Space换成div或者其它组件,点击Add Field之后,因为多个Form.Item 通过 {...restField} 指定了相同的key,浏览器会报 Encountered two children with the same key, `0`. Keys should be unique so that components maintain their identity across updates.
换成这种restField的写法可以避免这个问题,让不使用Space包裹多个Form.Item的场景也能跑通不报错。

* Update components/form/demo/dynamic-form-items.md

Co-authored-by: afc163 <afc163@gmail.com>

Co-authored-by: afc163 <afc163@gmail.com>
pull/29891/head
yaoweiprc 4 years ago
committed by GitHub
parent
commit
ed37b80d11
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 18
      components/form/demo/dynamic-form-items.md

18
components/form/demo/dynamic-form-items.md

@ -27,25 +27,25 @@ const Demo = () => {
<Form.List name="users">
{(fields, { add, remove }) => (
<>
{fields.map(field => (
<Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
{fields.map(({ key, name, fieldKey, ...restField }) => (
<Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
<Form.Item
{...field}
name={[field.name, 'first']}
fieldKey={[field.fieldKey, 'first']}
{...restField}
name={[name, 'first']}
fieldKey={[fieldKey, 'first']}
rules={[{ required: true, message: 'Missing first name' }]}
>
<Input placeholder="First Name" />
</Form.Item>
<Form.Item
{...field}
name={[field.name, 'last']}
fieldKey={[field.fieldKey, 'last']}
{...restField}
name={[name, 'last']}
fieldKey={[fieldKey, 'last']}
rules={[{ required: true, message: 'Missing last name' }]}
>
<Input placeholder="Last Name" />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(field.name)} />
<MinusCircleOutlined onClick={() => remove(name)} />
</Space>
))}
<Form.Item>

Loading…
Cancel
Save