React Refs 笔记📝

/* * @Description:  * @Author: ZhangXin * @Date: 2021-02-13 20:28:06 * @LastEditTime: 2021-02-13 22:02:27 * @LastEditors: ZhangXin */
import React, { Component } from 'react';import  Test from './Test';class Refes extends Component {    constructor(props) {        super(props);        this.state = {  }        this.inputValue = React.createRef();        this.classRefs = React.createRef();        this.getInputValue = this.getInputValue.bind(this)        this.getResfClass = this.getResfClass.bind(this)    }    getInputValue(){        this.inputValue.current.focus()        }    getResfClass(){        this.classRefs.current.getInputValue()    }    render() {         return (             <div>                {/* DOM 元素添加refs， 可以使用原生api 来操作 */}                <input type="text" ref={this.inputValue}/>                <button onClick={this.getInputValue}> 提交</button>                <button onClick={this.getResfClass}> class Refs </button>                {/* class 添加 refs ， 可以来控制 执行子组件事件执行 */}                <Test ref={this.classRefs} />                          </div>         );    }} export default Refes;

import React, { useRef } from 'react';

const Refs = () =>{    const textInput = useRef(null);
    function getFocus(){        textInput.current.focus();        console.log('测试')    }     return (        <div>            <input type="text" ref={textInput}/>            <button onClick={getFocus}>获取函数组件的ref</button>        </div>     )} 
export default Refs;