feat: Form ref adding nativeElement

[wanpan11]

中文版模板 / Chinese template

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Workflow
• Other (about what?)

🔗 Related issue link

• fix No ref props available in Form component #48776
• need feat: ref adding nativeElement react-component/field-form#691

💡 Background and solution

Form 组件 ref 增加原生 Dom 节点

📝 Changelog

Language	Changelog
🇺🇸 English	Form ref add nativeElement
🇨🇳 Chinese	Form 组件 ref 增加原生节点

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

• 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

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

👁 Visual Regression Report for PR #48841 Failed ❌

🎯 Target branch: feature (7cdeecf)
📖 View Full Report ↗︎

Expected (Branch feature)	Actual (Current PR)	Diff
progress-info-position.compact.png	progress-info-position.compact.css-var.png
progress-info-position.dark.png	progress-info-position.dark.css-var.png
progress-info-position.default.png	progress-info-position.default.css-var.png

Check Full Report for details

[github-actions]

[codesandbox-ci]

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.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (7cdeecf) to head (1b1e0ef).

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #48841   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          746       746           
  Lines        13013     13014    +1     
  Branches      3428      3428           
=========================================
+ Hits         13013     13014    +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Wxh16144]

想补充一个讨论，这个 api 会不会和原来的 props.form 功能有太多重复了， 开两个口子感觉不太好？毕竟 form 这个 props 从 4.x 就支持了（没用3不清楚）开发者都已经熟悉这个 api 了

[crazyair]

如果 useForm 跟 ref 同时用？

[wanpan11]

想补充一个讨论

以前就是支持 ref 的 不过没写在文档上 ref = useForm()

[Wxh16144]

以前就是支持 ref 的 不过没写在文档上 ref = useForm()

我去...

[wanpan11]

如果 useForm 跟 ref 同时用？

它两实际上都是引用同一个 rc-field-form 里的 useForm 返回的对象，rc 里面做了缓存

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/lodash@4.17.21	None	0	1.41 MB	bnjmnt4n
npm/lz-string@1.5.0	None	0	176 kB	pieroxy
npm/minimist@1.2.8	None	0	54.5 kB	ljharb
npm/regenerator-runtime@0.14.1	None	0	27.9 kB	benjamn

🚮 Removed packages: npm/@ant-design/colors@7.0.2, npm/@ant-design/compatible@5.1.2, npm/@ant-design/cssinjs@1.20.0, npm/@ant-design/happy-work-theme@1.0.0, npm/@ant-design/icons@5.3.7, npm/@ant-design/react-slick@1.1.2, npm/@ant-design/tools@18.0.2, npm/@antv/g6@4.8.24, npm/@babel/eslint-plugin@7.24.5, npm/@babel/runtime@7.24.5, npm/@biomejs/biome@1.7.3, npm/@codesandbox/sandpack-react@2.13.10, npm/@ctrl/tinycolor@3.6.1, npm/@dnd-kit/core@6.1.0, npm/@dnd-kit/modifiers@7.0.0, npm/@dnd-kit/sortable@8.0.0, npm/@dnd-kit/utilities@3.2.2, npm/@emotion/react@11.11.4, npm/@emotion/server@11.11.0, npm/@ianvs/prettier-plugin-sort-imports@4.2.1, npm/@madccc/duplicate-package-checker-webpack-plugin@1.0.0, npm/@microflash/rehype-figure@2.1.0, npm/@npmcli/run-script@8.1.0, npm/@octokit/rest@20.1.1, npm/@qixian.cs/github-contributors-list@2.0.1, npm/@rc-component/color-picker@1.5.3, npm/@rc-component/mutate-observer@1.1.0, npm/@rc-component/tour@1.14.2, npm/@rc-component/trigger@2.1.1, npm/@size-limit/file@11.1.3, npm/@stackblitz/sdk@1.10.0, npm/@testing-library/dom@10.1.0, npm/@testing-library/jest-dom@6.4.5, npm/@testing-library/react@15.0.7, npm/@testing-library/user-event@14.5.2, npm/@types/adm-zip@0.5.5, npm/@types/ali-oss@6.16.11, npm/@types/cli-progress@3.11.5, npm/@types/fs-extra@11.0.4, npm/@types/gtag.js@0.0.19, npm/@types/http-server@0.12.4, npm/@types/inquirer@9.0.7, npm/@types/isomorphic-fetch@0.0.39, npm/@types/jest-axe@3.5.9, npm/@types/jest-environment-puppeteer@5.0.6, npm/@types/jest-image-snapshot@6.4.0, npm/@types/jest@29.5.12, npm/@types/jquery@3.5.30, npm/@types/jsdom@21.1.6, npm/@types/minimist@1.2.5, npm/@types/nprogress@0.2.3, npm/@types/ora@3.2.0, npm/@types/pixelmatch@5.2.6, npm/@types/pngjs@6.0.5, npm/@types/prismjs@1.26.4, npm/@types/progress@2.0.7, npm/@types/qs@6.9.15, npm/@types/react-copy-to-clipboard@5.0.7, npm/@types/react-dom@18.3.0, npm/@types/react-highlight-words@0.16.7, npm/@types/react-resizable@3.0.7, npm/@types/react@18.3.2, npm/@types/semver@7.5.8, npm/@types/spinnies@0.5.3, npm/@types/tar@6.1.13, npm/@types/throttle-debounce@5.0.2, npm/@typescript-eslint/eslint-plugin@7.9.0, npm/@typescript-eslint/parser@7.9.0, npm/adm-zip@0.5.12, npm/ali-oss@6.20.0, npm/antd-img-crop@4.22.0, npm/antd-style@3.6.2, npm/antd-token-previewer@2.0.8, npm/axios@1.6.8, npm/cheerio@1.0.0-rc.12, npm/circular-dependency-plugin@5.2.2, npm/cli-progress@3.12.0, npm/copy-to-clipboard@3.3.3, npm/cross-env@7.0.3, npm/cross-fetch@4.0.0, npm/crypto@1.0.1, npm/dayjs@1.11.11, npm/dekko@0.2.1, npm/dumi-plugin-color-chunk@1.1.0, npm/dumi@2.3.4, npm/esbuild-loader@4.1.0, npm/eslint-config-airbnb@19.0.4, npm/eslint-config-prettier@9.1.0, npm/eslint-import-resolver-typescript@3.6.1, npm/eslint-plugin-compat@4.2.0, npm/eslint-plugin-import@2.29.1, npm/eslint-plugin-jest@28.5.0, npm/eslint-plugin-jsx-a11y@6.8.0, npm/eslint-plugin-lodash@7.4.0, npm/eslint-plugin-markdown@5.0.0, npm/eslint-plugin-react-hooks@4.6.2, npm/eslint-plugin-react@7.34.1, npm/eslint-plugin-unicorn@53.0.0, npm/eslint@8.57.0, npm/qrcode.react@3.1.0, npm/rc-cascader@3.25.0, npm/rc-checkbox@3.2.0, npm/rc-collapse@3.7.3, npm/rc-dialog@9.4.0, npm/rc-drawer@7.1.0, npm/rc-dropdown@4.2.0, npm/rc-field-form@2.1.0, npm/rc-image@7.7.0, npm/rc-input-number@9.0.0, npm/rc-input@1.4.5, npm/rc-mentions@2.11.1, npm/rc-menu@9.13.0, npm/rc-motion@2.9.0, npm/rc-notification@5.4.0, npm/rc-pagination@4.0.4, npm/rc-picker@4.5.0, npm/rc-progress@4.0.0, npm/rc-rate@2.12.0, npm/rc-resize-observer@1.4.0, npm/rc-segmented@2.3.0, npm/rc-select@14.13.3, npm/rc-slider@10.6.2, npm/rc-steps@6.0.1, npm/rc-switch@4.1.0, npm/rc-table@7.45.5, npm/rc-tabs@15.0.0, npm/rc-textarea@1.6.3, npm/rc-tooltip@6.2.0, npm/rc-tree-select@5.20.0, npm/rc-tree@5.8.7, npm/rc-upload@4.5.2, npm/rc-util@5.39.3, npm/react-dom@18.3.1, npm/react@18.3.1, npm/scroll-into-view-if-needed@3.1.0, npm/throttle-debounce@5.0.0

View full report↗︎