【react+ts- forwardRef】

引用传递（Ref forwading）是一种通过组件向子组件自动传递 引用ref 的技术。对于应用者的大多数组件来说没什么作用。但是对于有些重复使用的组件，可能有用。例如某些input组件，需要控制其focus，本来是可以使用ref来控制，但是因为该input已被包裹在组件中，这时就需要使用Ref forward来透过组件获得该input的引用。

作者：pipu
链接：https://www.jianshu.com/p/fac884647720/
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

1. 学习资料

JS-react forward ref高阶组件透传-1
JS-react forward ref高阶组件透传-2
TS-react forward ref高阶组件透传

2. 普通input透传

2.1 TS版本

Parent.tsx

import React, { useRef, useState } from 'react'
import Child from './Child';

export default function Parent() {
  const inputRef = useRef<HTMLInputElement>(null);
  const [text,setText] = useState<string>('');
  return (
    <div>
      <button onClick={()=>{
        inputRef.current?.focus();
        setText('');
      }}>父组件内按钮-点击input获取焦点并清空value</button>
      <Child ref={inputRef} text={text} changeVal={(val:string)=>{
        setText(val);
      }}></Child>
    </div>
  )
}

Child.tsx

import React, { ChangeEvent, forwardRef, MutableRefObject, useCallback, useRef } from 'react'

interface Iprops {
  text:string;
  changeVal:Function
}

const Child = forwardRef<HTMLInputElement,Iprops>((props,ref) => {
const localRef = useRef<HTMLInputElement | null>(null);

const onChange = useCallback((e:ChangeEvent<HTMLInputElement>)=>{
  props.changeVal(e.target.value)
},[props]);

return (
  <div>
    <input type="text" value={props.text} ref={el=>{
      localRef.current = el;
      console.log(ref)
      if (typeof ref === 'function') {
        ref(el);
      } else if (ref) {
        (ref as MutableRefObject<HTMLInputElement>).current = el!;
      }
    }} onChange={onChange}/>
    <button onClick={()=>{
      console.log(localRef.current)
      console.log(localRef.current?.value)
      console.log(props.text)
    }}>子组件内按钮-点击获取input输入值</button>
  </div>
)
}) 

export default Child

2.2 JS版本

Child.tsx

import React, { forwardRef, useCallback} from 'react'
const Child = forwardRef((props,ref) => {
	const onChange = useCallback((e)=>{
	  props.changeVal(e.target.value)
	},[props]);

	return (
	  <div>
	    <input type="text" value={props.text} ref={ref} onChange={onChange}/>
	    <button onClick={()=>{
	      console.log(ref.current)
	      console.log(ref.current.value)
	      console.log(props.text)
	    }}>子组件内按钮-点击获取input输入值</button>
	  </div>
	)
}) 

export default Child

3. TS-Antd-Form组价透传

Parent.tsx

import React, { useRef } from 'react'
import type { FormInstance } from 'antd/es/form';
import Child from './Child';

export default function Parent() {
  const addForm = useRef<FormInstance>(null);
  const updateForm= useRef<FormInstance>(null);
  return (
    <div>
      <button onClick={()=>{
        addForm.current?.validateFields()
        	.then((values) => {
        		console.log(values);
        	})
        	.catch((err) => {
		        console.log(err);
		     });
        
      }}>父组件内按钮-点击input获取焦点并清空value</button>
      <UserForm ref={addForm} regionList={regionList} roleList={roleList} />
      <UserForm ref={updateForm} regionList={regionList} roleList={roleList} />
    </div>
  )
}

Child.tsx

import React, { forwardRef, MutableRefObject, Ref, useEffect} from "react";
import { Form } from "antd";
import type { FormInstance } from 'antd/es/form';

interface UserFormProps {
  isUpdateRegionDisabled?:boolean;
  regionList:any[];
  roleList:any[];
}
const assignRefs = <T extends unknown>(...refs: Ref<T | null>[]) => {
  return (node: T | null) => {
    refs.forEach((r) => {
      if (typeof r === "function") {
        r(node);
      } else if (r) {
        (r as MutableRefObject<T | null>).current = node;
      }
    });
  };
};

const UserForm = forwardRef<FormInstance,UserFormProps>((props,ref)=>{
	const localRef = React.useRef<FormInstance | null>(null);
	useEffect(() => {
    	console.log('localRef',localRef.current)
  	}, [props]);
	return (
		<Form layout="vertical" ref={assignRefs(localRef, ref)}></Form>
	)
})