现代前端指南!

react 函数式组件ref的使用

2022-01-07  本文已影响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()
}
上一篇 下一篇

猜你喜欢

热点阅读