react中refs的使用

class中

1.创建refs

this.myRef = React.createRef()

2.绑定refs

<button ref={this.myRef} onClick={this.getValue}></button>

3.获取ref绑定的dom元素

getValue = ()=>{console.log(this.myRef.current)}

function中

1.

1.创建refs

let myRef = React.useRef()

2.绑定

<button ref={myRef} onClick={getValue}></button>

3.获取ref绑定的dom元素

getValue = ()=>{console.log(myRef.current)}

import React,{useRef,forwardRef,useImperativeHandle} from 'react';

function Child(props,parentRef){
    // 子组件内部自己创建 ref 
    let focusRef = useRef();
    let inputRef = useRef();
    //useImperativeHandle自定义暴露给父组件的实例值
    useImperativeHandle(parentRef,()=>{
        return {
            focusRef,
            inputRef,
            name:'计数器',
            focus(){
                focusRef.current.focus();
            },
            changeText(text){
                inputRef.current.value = text;
            }
        }
    }
      // 这个函数会返回一个对象
      // 该对象会作为父组件 current 属性的值
      // 通过这种方式，父组件可以使用操作子组件中的多个 ref
    

    );
    return (
        <>
            <input ref={focusRef}/>
            <input ref={inputRef}/>
        </>
    )

}
Child = forwardRef(Child);
//forwardRef可以在父组件中操作子组件的ref对象
//forwardRef 可以将父组件中的 ref 对象转发到子组件中的 dom 元素上
//子组件接受 props 和 ref 作为参数
function Parent(){
  const parentRef = useRef();//{current:''}
  function getFocus(){
    parentRef.current.focus();
    parentRef.current.changeText('<script>alert(1)</script>');
    console.log(parentRef.current.name);
  }
  return (
      <>
        <Child ref={parentRef}/>
        <button onClick={getFocus}>获得焦点</button>
      </>
  )

}
export default Parent

原文链接:React中Refs的使用