React Hooks父组件中获取子组件Antd Form的fieldsValue

相关文章推荐

纯真的领结 · npm ...· 1 周前 ·

谦逊的硬币 · react ...· 1 周前 ·

苦闷的墨镜 · 属性“”isFetching“”在类型“”n ...· 1 周前 ·

八块腹肌的柠檬 · TypeScript和Reactjs中的滚动 ...· 5 天前 ·

奔放的松树 · react 深拷贝方法 - CSDN文库· 11 小时前 ·

月球上的乌冬面 · 玩偶姐姐爆火，口罩的背后你知道吗_女神_观众_眼睛· 1 年前 ·

爱跑步的感冒药 · 18.28万起，全新英仕派上市，比亚迪汉慌不 ...· 1 年前 ·

沉着的沙滩裤 · 美媒列出了NBA篮球史最伟大的25名教练，泰 ...· 1 年前 ·

玩足球的莴苣 · 【bilibili晚会】2020最美的夜 ...· 1 年前 ·

低调的绿茶 · 2020俄罗斯【银色溜冰鞋】1899年的圣诞 ...· 1 年前 ·

image.png

index.js:1 Warning: you should not use `ref` on enhanced form, please use `wrappedComponentRef`. See: https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140
console.<computed> @ index.js:1
printWarning @ warning.js:34
warning @ warning.js:57
_this.<computed> @ createBaseForm.js:64
handleSubmit @ index.js:262
onOk @ index.js:39
Modal._this.handleOk @ Modal.js:95
Button._this.handleClick @ button.js:136
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executeDispatch @ react-dom.development.js:389
executeDispatchesInOrder @ react-dom.development.js:411
executeDispatchesAndRelease @ react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedPluginEventsInBatch @ react-dom.development.js:3514
handleTopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
index.js:1 Warning: You cannot set a form field before rendering a field associated with the value.
console.<computed> @ index.js:1
printWarning @ warning.js:34
warning @ warning.js:57
treeTraverse @ utils.js:42
(anonymous) @ utils.js:47
treeTraverse @ utils.js:45
flattenFields @ utils.js:54
flattenRegisteredFields @ createFieldsStore.js:38
setFieldsInitialValue @ createFieldsStore.js:248
_this.<computed> @ createBaseForm.js:66
handleSubmit @ index.js:262
onOk @ index.js:39
Modal._this.handleOk @ Modal.js:95
Button._this.handleClick @ button.js:136
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executeDispatch @ react-dom.development.js:389
executeDispatchesInOrder @ react-dom.development.js:411
executeDispatchesAndRelease @ react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedPluginEventsInBatch @ react-dom.development.js:3514
handleTopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
Show 6 more frames
index.js:1 Warning: you should not use `ref` on enhanced form, please use `wrappedComponentRef`. See: https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140
根据官网给出的实例，可以通过useImperativeHandle将子组件中props.form.getFieldsValue()暴露给父组件，从而在父组件中就可以拿到表单值，代码如下：（注：代码只是作为方法示例，不作为可运行实例）

import React, { 
  useRef
} from 'react'
import { Modal } from 'antd'
import MyForm from './myForm'
const ParentComp = () => {
    const getFormValue = useRef();
    const handleOk = () => {
      const fields = getFormValue.current.formFields;
      console.log(fields)
    return <Modal onOk={handleOk} >
             <MyForm
               wrappedComponentRef={getFormValue}
           </Modal>
export default ParentComp 
子组件(myForm.jsx)
import React, { useImperativeHandle, useRef, forwardRef } from 'react'
import { Form } from 'antd'
const MyForm = (props, ref) => {
  const formRef = useRef()
  useImperativeHandle(ref, () => ({
    formFields: props.form.getFieldsValue()
  return <Form ref={formRef}>
  </Form>