美文网首页现代前端指南!
react 函数式组件ref的使用

react 函数式组件ref的使用

作者: 混水妹妹 | 来源:发表于2022-01-07 17:55 被阅读0次

    1、ref的定义
    React中的ref属性可以帮助我们获取子组件的实例或者Dom对象,进而对组件进行修改
    场景,点击A调用B的方法:(单文件中使用ref)
    1、引入useRef并定义ref对象

    import React,{useState,useRef } from 'react';
    function AvatarPopup(props) {
        let fileInputEl = useRef();
    }
    

    2、绑定ref对象

    <div className="upload-border-btn">
     <input type="file" ref={fileInputEl}  title="上传图片" accept="image/*" onChange={onChange} />
     <div className="cursor upload-btn" onClick={onupload}>
       上传图片
     </div>
    </div>
    

    3、调用
    点击上传图片按纽时,调用ref对象的方法

    const onupload = () => {
       fileInputEl.current.click()
    }
    

    相关文章

      网友评论

        本文标题:react 函数式组件ref的使用

        本文链接:https://www.haomeiwen.com/subject/zbojcrtx.html