【react】react中ref的使用

ref的作用

一句话总结：获取真实DOM

Refs 是 React 中引用（references）的简写。可以用于获取一个 DOM 节点或者 React 组件的引用。它是一个有助于存储对特定的 React 元素或组件的引用的属性，它将由组件渲染配置函数返回。可以用来绑定到 render() 输出的任何组件上。

createRef()获取DOM节点引用

①在constructor中this.name = React.createRef();

②在元素上绑定ref = { this.name }

③获取ref值：this.name.current.value

constructor(){
        super();
        this.name = React.createRef();
}
render() {
        return (
                <div>
                        <input type="text" name="name" ref={this.name}/>

                        <button onClick={()=>{
                                console.log(this.name.current.value)
                        }}>获取DOM节点的引用</button>
                </div>
        )
}

createRef()获取class组件引用

假如我们在父组件中引入一个输入框子组件，要获取这个输入框的值，如何做呢？

①将子组件作为普通DOM元素，在父组件中引入子组件，并为子组件添加ref，ref = { this.input }

②如果在父组件中调用this.input.current，就可以获取子组件的信息

③在父组件中调用this.input.current.name.value，就可以获取子组件输入框中的值

// 父组件
export default class RefComponent extends Component {

        constructor(){
                super();
                this.input = React.createRef()
        }
        
        render() {
                return (
                        <div>
                                <InputComponent ref={this.input}></InputComponent>
                                <button onClick={()=>{
                                        console.log(this.input.current)
                                        console.log(this.input.current.name.value)
                                }}>获取组件中的ref值</button>
                        </div>
                )
        }
}

// 子组件
class InputComponent extends Component {
        constructor(){
                super();
                this.name = React.createRef()
        }

        render() {
                return (
                        <div>
                                <input type="text"ref={this.name}/>
                        </div>
                )
        }
}

forwardRef()获取function组件引用

上述方法只能在父组件中获取类组件的引用，如果在函数组件上添加ref，则会报错。要在父组件中获取函数组件的引用，可以使用forwardRef()

export default class RefComponent extends Component {

        constructor(){
                super();
                this.input = React.createRef()
        }

        render() {
                const Input = React.forwardRef(InputComponent);
                return (
                        <div>
                                <Input type="text" ref={this.input}/>
                                
                                <button onClick={()=>{
                                        console.log(this.input.current.value);
                                }}>获取function组件ref</button>
                        </div>
                )
        }
}


function InputComponent(props, ref){
        return(
                <div>
                        <input type="text" ref={ref}/>
                </div>
        )
}

useRef()获取DOM节点引用

①useRef创建ref：const nameRef = useRef("");

②在元素上绑定ref = { nameRef }

③获取ref值：this.nameRef.current.value

function App() {
  const nameRef = useRef('');

  return (
    <div>
      <input ref={nameRef} />
      <div
        onClick={() => {
          console.log(nameRef.current.value);
        }}
      >
        submit
      </div>
    </div>
  );
}

回调函数获取DOM节点引用

①在constructor中this.name = null;

②定义回调函数

getNameRef = (e) => { this.name = e; }

③在元素上绑定ref = { this.getNameRef }

④获取ref值：this.name.value