mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 19:19:57 +08:00
doc: added more info about nested fields to migration guide (#21758)
Added more examples to form nested fields.
This commit is contained in:
parent
24133d9e55
commit
a226c226bf
@ -265,6 +265,49 @@ form.getFieldsError();
|
||||
*/
|
||||
```
|
||||
|
||||
Nested field definition has changed from:
|
||||
|
||||
```jsx
|
||||
// antd v3
|
||||
<Form.Item label="Firstname">
|
||||
{getFieldDecorator("user.0.firstname", {})(<Input />)}
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
To
|
||||
|
||||
```jsx
|
||||
// antd v4
|
||||
<Form.Item
|
||||
name={['user', '0', 'firstname']}
|
||||
label="Firstname"
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
Similarly using `setFieldsValue` has changed from:
|
||||
|
||||
```jsx
|
||||
// antd v3
|
||||
this.formRef.current.setFieldsValue({
|
||||
'user.0.firstname': 'John'
|
||||
});
|
||||
```
|
||||
|
||||
To
|
||||
|
||||
```jsx
|
||||
// antd v4
|
||||
this.formRef.current.setFieldsValue({
|
||||
user:
|
||||
[{
|
||||
firstname: 'John'
|
||||
}]
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### Remove callback in validateFields
|
||||
|
||||
`validateFields` will return a Promise, so you can handle the error with `async/await` or `then/catch`. It is no longer necessary to determine if `errors` is empty:
|
||||
|
@ -267,6 +267,49 @@ form.getFieldsError();
|
||||
*/
|
||||
```
|
||||
|
||||
|
||||
嵌套字段定义由:
|
||||
|
||||
```jsx
|
||||
// antd v3
|
||||
<Form.Item label="Firstname">
|
||||
{getFieldDecorator("user.0.firstname", {})(<Input />)}
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
改至:
|
||||
|
||||
```jsx
|
||||
// antd v4
|
||||
<Form.Item
|
||||
name={['user', '0', 'firstname']}
|
||||
label="Firstname"
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
相似的,`setFieldsValue` 由:
|
||||
|
||||
```jsx
|
||||
// antd v3
|
||||
this.formRef.current.setFieldsValue({
|
||||
'user.0.firstname': 'John'
|
||||
});
|
||||
```
|
||||
|
||||
改至:
|
||||
|
||||
```jsx
|
||||
// antd v4
|
||||
this.formRef.current.setFieldsValue({
|
||||
user:
|
||||
[{
|
||||
firstname: 'John'
|
||||
}]
|
||||
});
|
||||
```
|
||||
|
||||
## validateFields 不再支持 callback
|
||||
|
||||
`validateFields` 会返回 Promise 对象,因而你可以通过 `async/await` 或者 `then/catch` 来执行对应的错误处理。不再需要判断 `errors` 是否为空:
|
||||
|
Loading…
Reference in New Issue
Block a user