docs: 📖 update Form ts demo for createRef (#23440)

close #23417
This commit is contained in:
偏右 2020-04-21 16:42:56 +08:00 committed by GitHub
parent 8bd8eee573
commit 4902c5a4f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 5 additions and 4 deletions

View File

@ -15,6 +15,7 @@ We recommend use `Form.useForm` to create data control. If you are using class c
```tsx ```tsx
import { Form, Input, Button, Select } from 'antd'; import { Form, Input, Button, Select } from 'antd';
import { FormInstance } from 'antd/lib/form';
const { Option } = Select; const { Option } = Select;
@ -27,7 +28,7 @@ const tailLayout = {
}; };
class Demo extends React.Component { class Demo extends React.Component {
formRef = React.createRef(); formRef = React.createRef<FormInstance>();
onGenderChange = value => { onGenderChange = value => {
this.formRef.current.setFieldsValue({ this.formRef.current.setFieldsValue({

View File

@ -312,7 +312,7 @@ Before Modal open, children elements do not exist in the view. You can set `forc
Components inside Form.Item with name property will turn into controlled mode, that makes `defaultValue` does not work anymore. Please try `initialValues` of Form to set default value. Components inside Form.Item with name property will turn into controlled mode, that makes `defaultValue` does not work anymore. Please try `initialValues` of Form to set default value.
### Why resetFields will re-mount component? ### Why `resetFields` will re-mount component?
`resetFields` will re-mount component under Field to clean up customize component side effect(like asyn data, cached state, etc.). It's by design. `resetFields` will re-mount component under Field to clean up customize component side effect(like asyn data, cached state, etc.). It's by design.

View File

@ -309,11 +309,11 @@ validator(rule, value, callback) => {
这是因为你在调用 form 方法时Modal 还未初始化导致 form 没有关联任何 Form 组件。你可以通过给 Modal 设置 `forceRender` 将其预渲染。示例点击[此处](https://codesandbox.io/s/antd-reproduction-template-ibu5c)。 这是因为你在调用 form 方法时Modal 还未初始化导致 form 没有关联任何 Form 组件。你可以通过给 Modal 设置 `forceRender` 将其预渲染。示例点击[此处](https://codesandbox.io/s/antd-reproduction-template-ibu5c)。
### 为什么 Form.Item 下的子组件 defaultValue 不生效? ### 为什么 Form.Item 下的子组件 `defaultValue` 不生效?
当你为 Form.Item 设置 `name` 属性后,子组件会转为受控模式。因而 `defaultValue` 不会生效。你需要在 Form 上通过 `initialValues` 设置默认值。 当你为 Form.Item 设置 `name` 属性后,子组件会转为受控模式。因而 `defaultValue` 不会生效。你需要在 Form 上通过 `initialValues` 设置默认值。
### 为什么 resetFields 会重新 mount 组件? ### 为什么 `resetFields` 会重新 mount 组件?
`resetFields` 会重置整个 Field因而其子组件也会重新 mount 从而消除自定义组件可能存在的副作用(例如异步数据、状态等等)。 `resetFields` 会重置整个 Field因而其子组件也会重新 mount 从而消除自定义组件可能存在的副作用(例如异步数据、状态等等)。