React antd表单使用Ref - MutableRefObject

1.useRef

useRef 是一个 React Hook，它能让你引用一个不需要渲染的值。
const ref = useRef(initialValue)
参数
initialValue：ref 对象的 current 属性的初始值。可以是任意类型的值。这个参数会首次渲染后被忽略。
返回值
useRef 返回一个只有一个属性的对象:
current：最初，它被设置为你传递的 initialValue。之后你可以把它设置为其他值。如果你把 ref 对象作为一个 JSX 节点的 ref 属性传递给 React，React 将为它设置 current 属性。
在后续的渲染中，useRef 将返回同一个对象。

useRef 返回一个具有单个 current 属性 的 ref 对象，并初始化为你提供的 initialvalue

注意： 改变 ref 不会触发重新渲染。
在函数组件中创建ref，是作为 mutable 的数据存储中心

2.创建ref

• React.createRef
• useRef

// useRef 的类型
function useRef<T>(initialValue: T|null): RefObject<T>;
function useRef<T>(initialValue: T): MutableRefObject<T>;
function useRef<T = undefined>(): MutableRefObject<T | undefined>;

ref有两种类型：MutableRefObject 和 RefObject.
这两种类型都有 current 字段

3.使用

假设antd的表格点击显示弹窗，在父组件中点击按钮来保存子组件弹窗中的数据，

在父组件中，从react中引入 MutableRefObject

import React, { useState, useEffect, useRef, MutableRefObject } from 'react'

在组件里面

const detailRef: MutableRefObject<any> = useRef()

然后在点击按钮的时候，就可以使用

detailRef.current.onFinish()

来保存表单的内容

4.在子组件上使用ref绑定

<ModelDetails
	ref={detailref}>
</Modeltails>