• React-hooks 父组件通过ref获取子组件数据和方法

    我们知道，对于子组件或者节点，如果是class类，存在实例，可以通过 React.createRef() 挂载到节点或者组件上，然后通过 this 获取到该节点或组件。

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    class RefTest extends React.Component{
        constructor(props){
            super(props);
            this.myRef=React.createRef();
        }
        componentDidMount(){
            console.log(this.myRef.current);
        }
        render(){
            return this.myRef}/>
        }
    }

    　　

    但是在子组件是函数组件的时候，因为函数组件没有实例，所以在正常情况下， ref 是不能挂载函数组件上的。那么此时，我们通过 useImperativeHandle 和 forwardRef 配合就能达到效果。

     

    useImperativeHandle

    useImperativeHandle：可以配合 forwardRef 自定义暴露给父组件的实例值。

    useImperativeHandle为我们提供了一个类似实例的东西，它帮助我们通过useImperativeHandle 的第二个参数，将所返回的对象的内容挂载到父组件的 ref.current 上.

    useImperativeHandle 接收三个参数：

    ① 第一个参数 ref：接收 forWardRef 传递过来的 ref。
    ② 第二个参数 createHandle：处理函数，返回值作为暴露给父组件的 ref 对象
    ③ 第三个参数 deps：依赖项 deps，依赖项更改形成新的 ref 对象。
    forwardRef 会创建一个 React 组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。

    下面举一个实际例子，方便大家理解：

    ?
                    "isRaiseMoney" label="是否募集资金" rules={[{ required: true }]}>
                        
                    
                
                {
                    isShow && (
                        <>
                            
                                "usedMoney" label="已使用资金" rules={[{ required: isShow }]}>
                                    
                                        formatter={value => `${value}`.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')}
                                        parser={value => `${value}`.replace(/\$\s?|(,*)/g, '')}
                                        style={{width: '100%'}}
                                        precision={2}
                                        disabled
                                        placeholder="自动计算"
                                    />
                                
                            
                            
                                "remainMoney" label="剩余资金" rules={[{ required: isShow }]}>
                                    
                                        formatter={value => `${value}`.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')}
                                        parser={value => `${value}`.replace(/\$\s?|(,*)/g, '')}
                                        style={{width: '100%'}}
                                        precision={2}
                                        disabled
                                        placeholder="自动计算"
                                    />
                                
                            
                        
                    )
                }
            
      )
    })
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    // 子组件
     
    const CollectAmountFormItem = forwardRef(({ isDisabled, val, handleChange }: Props, onRef: any) => {
     
        const [isShow, setIsShow] = useState(val == 1); // 是否展示募集资金和剩余募集资金
     
        // 暴露给父组件的属性
        useImperativeHandle(onRef, () => ({
            isShow,
            setIsShow
        }));
     
        useEffect(() => {
            if (val == 1) setIsShow(true)
            else setIsShow(false)
        }, [val])
     
        /**
         * 是否募集回调
         * @param val 下拉框id
         * @param option 下拉框对象
         */
        const handleSelect = (val: any, option: any) => {
            setIsShow(val == 1);
            handleChange && handleChange(val, option);
        };
     
        return (
            <>
                

    　　

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // 在父组件中使用
     
    // 1、首先引入该子组件
    import CollectAmountFormItem from '@/components/CollectAmountFormItem';
     
    // 2、定义一个ref
    const collectRef = useRef()
     
    // 3、使用
     
    // 然后就可以在父组件中的一些方法中获取子组件暴露出来的方法或值，比如:
     
    collectRef.current.setIsShow(false)

    　　

  • 相关阅读:
    jenkins-用户权限管理
    Chapter 2 Gradient Descent
    websocket学习笔记【springboot+websocket聊天室demo】
    大语言模型的关键技术
    Python中tuple()函数的用法
    有什么视频转文字软件？快把这些方法收好
    数据结构树应用在哪儿比较多
    如何写砸一本小说
    Bean的循环依赖问题
    PL/SQL编程
  • 原文地址：https://www.cnblogs.com/jiajialove/p/17404121.html