docs(Form): 如何在函数组件中拿到 form 实例 #19937

chj-damon · 2019-11-26T06:49:22Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

there is no a demo that shows developers how they can use wrappedComponentRef in functional components. So I made this demo.

📝 Changelog

Language	Changelog
🇺🇸 English	update form document FAQ with using wrappedComponentRef in functional component
🇨🇳 Chinese	更新Form文档，在FAQ增加如何在函数组件中使用wrappedComponentRef的例子

☑️ Self Check before Merge

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

netlify · 2019-11-26T06:49:34Z

Deploy preview for ant-design ready!

Built with commit 861ff00

https://deploy-preview-19937--ant-design.netlify.com

zombieJ · 2019-11-26T06:51:54Z

Added in FAQ instead.

codesandbox-ci · 2019-11-26T06:55:26Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 861ff00:

Sandbox	Source
antd reproduction template	Configuration

zombieJ · 2019-11-26T07:20:13Z

components/form/index.en-US.md

@@ -275,3 +275,55 @@ validator(rule, value, callback) => {
  }
 }
 ```
+
+### How you can use `wrappedComponentRef` to get form instance in functional component


Why `wrappedComponentRef` get warning with function component?

warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()

I mean change the title to:

Why wrappedComponentRef get warning with function component?

zombieJ · 2019-11-26T07:21:03Z

components/form/index.en-US.md

+
+### How you can use `wrappedComponentRef` to get form instance in functional component
+
+you have to combine `forwardRef` with `useImperativeHandle` so you can get form instance by using `wrappedComponentRef`:


You should wrap function component with forwardRef to pass ref:

useImperativeHandle is not must have. Please help to check this.

https://reactjs.org/docs/hooks-reference.html#useimperativehandle, react officially recommend to use useImperativeHandle with forwardRef.

useImperativeHandle is aim to customize ref content. wrappedComponentRef get the component instance with Form.create. They not use customize ref indeed.

well, you might be right, but in fact, if I remove useImperativeHandle, I cannot get the instance. you can try the codesandbox.

afc163 · 2019-11-26T07:21:54Z

做一个 codesandbox 吧，这一大段代码略长。

zombieJ · 2019-11-26T07:23:09Z

components/form/index.en-US.md

+}
+
+type Ref = FormComponentProps;
+const FCForm = forwardRef<Ref, FCFormProps>(({ form, onSubmit }, ref) => {


Code block should be simplify. Only show how to use forwardRef instead.

I'll make an codesandbox instead of documenting it.

codecov · 2019-11-26T07:25:36Z

Codecov Report

Merging #19937 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master   #19937   +/-   ##
=======================================
  Coverage    97.8%    97.8%           
=======================================
  Files         284      284           
  Lines        7705     7705           
  Branches     2120     2165   +45     
=======================================
  Hits         7536     7536           
  Misses        169      169

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ae44aae...861ff00. Read the comment docs.

afc163 · 2019-11-26T07:26:43Z

components/form/index.zh-CN.md

@@ -277,3 +277,55 @@ validator(rule, value, callback) => {
  }
 }
 ```
+
+### 如何在函数组件中也能正常使用`wrappedComponentRef`拿到 form 实例


Suggested change

### 如何在函数组件中也能正常使用`wrappedComponentRef`拿到 form 实例

### 如何在函数组件中拿到 form 实例？

afc163 · 2019-11-26T07:27:04Z

components/form/index.zh-CN.md

+
+### 如何在函数组件中也能正常使用`wrappedComponentRef`拿到 form 实例
+
+你需要通过`forwardRef`和`useImperativeHandle`的组合使用来实现在函数组件中正确拿到 form 实例：


Suggested change

你需要通过`forwardRef`和`useImperativeHandle`的组合使用来实现在函数组件中正确拿到 form 实例：

你需要通过 `forwardRef` 和 `useImperativeHandle` 的组合使用来实现在函数组件中正确拿到 form 实例：

chj-damon · 2019-11-26T07:29:51Z

做一个 codesandbox 吧，这一大段代码略长。

好的。

zombieJ · 2019-11-27T04:05:13Z

中英文解释的不是同一件事情，一个是解决 FC warning，一个是拿 form 实例。需要统一一下。

zombieJ · 2019-11-27T07:48:11Z

components/form/index.en-US.md

@@ -275,3 +275,40 @@ validator(rule, value, callback) => {
  }
 }
 ```
+
+### get form instance in functional component


--- get form instance in functional component +++ Get form instance from function component

zombieJ · 2019-11-27T07:49:25Z

components/form/index.en-US.md

+
+### get form instance in functional component
+
+you need to combine `forwardRef` with `useImperativeHandle` to get form instance:


y => Y

You can combine ...

zombieJ · 2019-11-27T07:49:32Z

components/form/index.en-US.md

+
+you need to combine `forwardRef` with `useImperativeHandle` to get form instance:
+
+your custom form component should look like this:


zombieJ · 2019-11-27T07:49:47Z

components/form/index.en-US.md

+};
+```
+
+you can click the codesandbox to see the complete demo:


zombieJ · 2019-11-27T08:06:02Z

components/form/index.en-US.md

+};
+```
+
+You can click the codesandbox to see the complete demo:


Online demo:

zombieJ · 2019-11-27T08:06:14Z

components/form/index.zh-CN.md

+};
+```
+
+你可以点击下面的 codeSandbox 链接查看完整示例：


在线示例：

zombieJ · 2019-11-27T08:08:10Z

components/form/index.en-US.md

+
+You need to combine `forwardRef` with `useImperativeHandle` to get form instance:
+
+Your custom form component should look like this:


上面有冒号了，这行又一个冒号。感觉可以删掉这行。中文同。

为Form新增如何在函数组件中使用的例子

b46c2f0

pr-triage bot added the PR: unreviewed label Nov 26, 2019

chj_damon added 2 commits November 26, 2019 15:08

在Form FAQ中增加在函数组件中怎么正确拿到Form实例的说明

4b3e696

更新英文文档

e228309

zombieJ reviewed Nov 26, 2019

View reviewed changes

afc163 reviewed Nov 26, 2019

View reviewed changes

按照comment修改

9acab4b

chj-damon changed the title ~~为Form新增如何在函数组件中使用wrappedComponentRef的例子~~ 如何在函数组件中拿到 form 实例 Nov 26, 2019

更新英文标题

f9b6a09

yoyo837 changed the title ~~如何在函数组件中拿到 form 实例~~ docs: 如何在函数组件中拿到 form 实例 Nov 27, 2019

auto-add-label bot added the documentation label Nov 27, 2019

yoyo837 changed the title ~~docs: 如何在函数组件中拿到 form 实例~~ docs(Form): 如何在函数组件中拿到 form 实例 Nov 27, 2019

修改英文文档FAQ的标题

f846d01

zombieJ reviewed Nov 27, 2019

View reviewed changes

components/form/index.en-US.md Outdated

};

```

you can click the codesandbox to see the complete demo:

Copy link

Member

zombieJ Nov 27, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

y => Y

修改英文文档里的大小写问题

e190bb0

zombieJ reviewed Nov 27, 2019

View reviewed changes

components/form/index.en-US.md Outdated

};

```

You can click the codesandbox to see the complete demo:

Copy link

Member

zombieJ Nov 27, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Online demo:

zombieJ reviewed Nov 27, 2019

View reviewed changes

components/form/index.zh-CN.md Outdated

};

```

你可以点击下面的 codeSandbox 链接查看完整示例：

Copy link

Member

zombieJ Nov 27, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在线示例：

zombieJ reviewed Nov 27, 2019

View reviewed changes

chj_damon added 2 commits November 27, 2019 16:09

按照豆酱的comments进行修改

4b7918b

按照comments进行修改

861ff00

zombieJ approved these changes Nov 27, 2019

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: unreviewed labels Nov 27, 2019

zombieJ merged commit 2d82b59 into ant-design:master Nov 27, 2019

pr-triage bot added PR: merged and removed PR: reviewed-approved labels Nov 27, 2019

weekly-digest bot mentioned this pull request Dec 1, 2019

Weekly Digest (24 November, 2019 - 1 December, 2019) #20028

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(Form): 如何在函数组件中拿到 form 实例 #19937

docs(Form): 如何在函数组件中拿到 form 实例 #19937

chj-damon commented Nov 26, 2019 •

edited

netlify bot commented Nov 26, 2019 •

edited

zombieJ commented Nov 26, 2019

codesandbox-ci bot commented Nov 26, 2019 •

edited

zombieJ Nov 26, 2019

chj-damon Nov 26, 2019

zombieJ Nov 26, 2019

zombieJ Nov 26, 2019

zombieJ Nov 26, 2019

chj-damon Nov 26, 2019 •

edited

zombieJ Nov 26, 2019 •

edited

chj-damon Nov 26, 2019

afc163 commented Nov 26, 2019

zombieJ Nov 26, 2019

chj-damon Nov 26, 2019

codecov bot commented Nov 26, 2019 •

edited

afc163 Nov 26, 2019 •

edited

afc163 Nov 26, 2019

chj-damon commented Nov 26, 2019 •

edited

zombieJ commented Nov 27, 2019

zombieJ Nov 27, 2019 •

edited

zombieJ Nov 27, 2019

zombieJ Nov 27, 2019

zombieJ Nov 27, 2019

zombieJ Nov 27, 2019

zombieJ Nov 27, 2019

zombieJ Nov 27, 2019 •

edited


		### How you can use `wrappedComponentRef` to get form instance in functional component

		you have to combine `forwardRef` with `useImperativeHandle` so you can get form instance by using `wrappedComponentRef`:

	### 如何在函数组件中也能正常使用`wrappedComponentRef`拿到 form 实例
	### 如何在函数组件中拿到 form 实例？


		### 如何在函数组件中也能正常使用`wrappedComponentRef`拿到 form 实例

		你需要通过`forwardRef`和`useImperativeHandle`的组合使用来实现在函数组件中正确拿到 form 实例：

	你需要通过`forwardRef`和`useImperativeHandle`的组合使用来实现在函数组件中正确拿到 form 实例：
	你需要通过 `forwardRef` 和 `useImperativeHandle` 的组合使用来实现在函数组件中正确拿到 form 实例：


		### get form instance in functional component

		you need to combine `forwardRef` with `useImperativeHandle` to get form instance:


		you need to combine `forwardRef` with `useImperativeHandle` to get form instance:

		your custom form component should look like this:

docs(Form): 如何在函数组件中拿到 form 实例 #19937

docs(Form): 如何在函数组件中拿到 form 实例 #19937

Conversation

chj-damon commented Nov 26, 2019 • edited

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self Check before Merge

netlify bot commented Nov 26, 2019 • edited

zombieJ commented Nov 26, 2019

codesandbox-ci bot commented Nov 26, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chj-damon Nov 26, 2019 • edited

Choose a reason for hiding this comment

zombieJ Nov 26, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afc163 commented Nov 26, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Nov 26, 2019 • edited

Codecov Report

afc163 Nov 26, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chj-damon commented Nov 26, 2019 • edited

zombieJ commented Nov 27, 2019

zombieJ Nov 27, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zombieJ Nov 27, 2019 • edited

Choose a reason for hiding this comment

chj-damon commented Nov 26, 2019 •

edited

netlify bot commented Nov 26, 2019 •

edited

codesandbox-ci bot commented Nov 26, 2019 •

edited

chj-damon Nov 26, 2019 •

edited

zombieJ Nov 26, 2019 •

edited

codecov bot commented Nov 26, 2019 •

edited

afc163 Nov 26, 2019 •

edited

chj-damon commented Nov 26, 2019 •

edited

zombieJ Nov 27, 2019 •

edited

zombieJ Nov 27, 2019 •

edited