react refs的使用

一. class组件和React Element使用ref

class Demo extends React.Component {
    constructor(props){
        super(props);
        this.inputRef = React.createRef();    
    }

    componentDidMount(){
        // 组件挂载后ref已经指向了input元素    
        this.inputRef.current.focus();
    }

    handleFocus(){
        // 父组件可以调用该方法让input focus
        this.inputRef.current.focus();
    }
    
    render(){
        return <input ref={this.inputRef} />
    }
}

class Demo2 extends React.Component { 
    constructor(props){
        super(props);
        this.DemoRef = React.createRef();    
    }

    componentDidMount(){
        // 组件挂载可以获得子组件Demo的实例  
        this.DemoRef.current.handleFocus();   
    }
    
    render(){
        return <Demo ref={this.DemoRef} />;
    }
}

二. 函数组件中使用ref

const Demo = function(){
    // 函数组件内部可以创建ref,如果函数组件props传入ref，使用React.forwardRef()进行ref转发
    const inputRef = useRef(null);
    const handleFocus = ()=>{
        inputRef.current.focus();
    }
    return <input ref={inputRef} />    
}

// ref转发
const Demo2 = React.forward((props,ref)=>{
    return <input ref={ref} />
})
const Demo3 = ()=>{
    const inputRef = useRef(null);
    return <Demo2 ref={inputRef} />
}

// useImperativeHandle 自定义暴漏给父组件的实例值
const Demo2 = React.forward((props,ref)=>{   
    const inputRef = useRef(null);
    useImperativeHandle(ref,()=>{
        // 返回一个对象，定义暴漏给父组件的ref对象上的有什么方法和属性
       return {
                focus:()=>{inputRef.current.focus();}
              };
    });
    return <input ref={inputRef} />
});