React父组件获取子组件方法

React父组件获取子组件方法

在react的class组件中父组件调用子组件方法直接用ref就可以拿到子组件这个实例，但是在function中，api并没有这么明确，我们需要借助hooks去帮助我们拿到这个实例。
本篇介绍如何运用useRef 与 useImperativeHandel 方法结合

函数组件实现

子组件代码

import { Input } from 'antd';
import React, {  useImperativeHandle, useRef } from 'react';

export default function ChildInput ({onRef}: any)  {
  const inputRef = useRef(null);
  
  useImperativeHandle(onRef, () => inputRef.current);
  
  return (
      <div >
        <Input ref={inputRef}/>
      </div>
  )
}

父组件代码

import ChildInput from './ChildInput';
import { Button } from 'antd';
import React, { useRef } from 'react';

export default () => {
  const inputRef = useRef([]);
 
  const onFinish = () => {
    console.log('获取子组件值', inputRef.current.value);
  }

  return (
      <div>
        <Button disabled={disabled} type='primary' onClick={onFinish}>保存</Button>
        <ChildInput onRef={inputRef} />
      </div>
  );
};

组件中生成多个子组件，遍历多个ref

子组件如上父组件代码

import ChildInput from './ChildInput';
import { Button } from 'antd';
import React, { useRef } from 'react';
import { InputList } from '@/constants';
export default () => {
  const inputRef = useRef([]);
 	
  const onFinish = () => {
    console.log('获取全部子组件', inputRef.current);
  }

  return (
      <div>
        <Button disabled={disabled} type='primary' onClick={onFinish}>保存</Button>
        {
			InputList.map((item,index)=>{
				return (
					<ChildInput 
					   key={item.id} 
	                  //根据索引添加多个ref
	                  onRef={(f: any) => { inputRef.current[index] = f}}  
					/>
				)
			})
		}
      </div>
  );
};