doc: added more info about nested fields to migration guide (#21758)

Added more examples to form nested fields.
This commit is contained in:
Martin Cermak 2020-03-03 03:51:54 +01:00 committed by GitHub
parent 24133d9e55
commit a226c226bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 86 additions and 0 deletions

View File

@ -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:

View File

@ -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` 是否为空: