父组件调用子组件方法-useRef

以前写过一篇父组件调用子组件方法的文章, 当时是在class类组件中, 使用onRef

本篇文章中使用useRef 实现父组件调用子组件方法

实现的功能是父组件的按钮点击清空表单 则清空子组件中的input中的内容

上代码
parent.js

import React, { createRef, useRef, useEffect } from 'react';
import { Button } from 'antd'
import Child from './child'
const Parent = () => {
  const _ref = useRef()
  const onClear = () => {
    _ref.current.empty()
  }
  return (
    <>
      <Child ref1={_ref} />
      <Button onClick={onClear} type="primary">调用子组件方法</Button>
    </>
  )
}

export default Parent

给在父组件中定义useRef , 给子组件传递, 点击父组件方法, 通过ref.current触发子组件中清空的方法
child.js

import React, { useState} from 'react';
import { I