react 使用 ref

前言

• 总体而言 ref 的使用是比较简单的，但确实是比vue稍微多了一步，现在的React有两种使用ref的办法，分别对应 Class类型的写法和hook的写法

第一种 类组件写法

import React from 'react';
export default class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {};
        this.formRef = React.createRef();
    }
    _buttonEvent() {
        //通过 current 内对象获取想要的数据
      //  this.formRef && this.formRef.current
      console.log("this.formRef ", this.formRef);
    }
    render() {
        return (
            <div className='home'>
                <div ref={this.formRef}> 这里是内容</div>

                <button onClick={() => this._buttonEvent()}> 按钮</button>
            </div>
        )
    }
}

第一种 Hook写法

import React, { useRef } from 'react';

function Hook() {
    const formRef = useRef(null);

    const _buttonEvent = () => {
        //通过 current 内对象获取想要的数据 ，hook不需要使用this
       //  formRef && formRef.current
       console.log("formRef ", formRef);
    }

    return (
        <div className='Hook'>
            <p ref={formRef}>我是hook1</p>
            <button onClick={_buttonEvent}>按钮</button>
        </div>
    );
}
export default Hook

结语

希望各位朋友能精通React ，这里有react 的 demo ，望多指教 。
码云地址：react-question-v6