项目中遇到的 ref 几种情况下的使用记录

幸福了，然后呢

于 2022-03-29 16:05:02 发布

阅读量1.1k

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_42260975/article/details/123530634

版权

本文记录了在项目中遇到的 React 中 ref 的几种使用情况，包括在函数组件和类组件中的不同用法，详细解释了如何在不同场景下利用 ref 实现特定功能，如获取 DOM 节点或实现页面刷新等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中遇到的 ref 几种情况下的使用记录

一、函数组件
(1) <Form>组件中：ref={ref => (FormRef = ref)}

import React, {
    useRef } from 'react';
import {
     Input, Form, Row, Col } from 'antd';
const {
    TextArea } = Input;

const Delete = props => {
   
    let FormRef = useRef();
    const saveData = () => {
   
        console.log(FormRef);
    }
    props.modalControl.registerOk(() => saveData());

    return (
        <Form
            ref={
   ref => (FormRef = ref)}
        >
            <Row gutter={
   {
    md:

最低0.47元/天解锁文章