Ref转发-具备更强的自定义组件能力

作者: zhang_pan | 来源:发表于2024-04-21 09:04 被阅读0次

react自定义组件中使用ref
refs转发常见案例
react获取ref
2021-02-05 React useImperativeHa
React中React.forwardRef的使用方式
如何使用React Refs
hooks中父组件调用子组件方法或者数据
高阶组件转发子组件ref
react hook 父组件调用子组件方法
react ref 常见用法

使用自定义组件（组合模式）时，外层对原始组件的操作

CustomInput.tsx

import React, { useState, forwardRef } from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  TextInput,
  LayoutAnimation,
  TouchableOpacity,
} from 'react-native';

import icon_error from '../assets/images/icon_error.png';
import icon_right from '../assets/images/icon_right.png';
import icon_question from '../assets/images/icon_question.webp';
import icon_delete from '../assets/images/icon_delete.png';


export default forwardRef<any, TextInput>((props, ref) => {
    const [value, setValue] = useState<string>('');

    return (
        <View style={styles.root}>
            <View 
                style={[
                    styles.inputWrap, 
                    { borderColor: !value 
                        ? '#888' 
                        : value?.length === 11 
                            ? '#00CD00' 
                            : '#ff3050' }
                ]}>
                <TextInput
                    ref={ref}
                    style={styles.input}
                    value={value}
                    keyboardType='number-pad'
                    onChangeText={value => {
                        LayoutAnimation.spring();
                        setValue(value);
                    }}
                    maxLength={11}
                />

                {!!value &&
                    <TouchableOpacity
                        style={styles.deleteButton}
                        onPress={() => {
                            LayoutAnimation.spring();
                            setValue('');
                        }}
                    >
                        <Image style={styles.deleteImg} source={icon_delete} />
                    </TouchableOpacity>
                }
            </View>
            <View style={styles.tipsLayout}>
                {!value ?
                <>
                    <Image style={styles.tipImg} source={icon_question} />
                    <Text style={styles.tipsTxt}>请输入您的手机号</Text>
                </> : value.length === 11 ?
                <>
                    <Image style={styles.tipImgRight} source={icon_right} />
                    <Text style={styles.tipsTxtRight}>输入正确，可进行提交</Text>
                </> :
                <>
                    <Image style={styles.tipImgError} source={icon_error} />
                    <Text style={styles.tipsTxtError}>格式错误，请输入正确手机号</Text>
                </>}
            </View>
        </View>
    );
});

const styles = StyleSheet.create({
    root: {
        width: '100%',
        flexDirection: 'column',
    },
    input: {
        width: '100%',
        height: 56,
        backgroundColor: 'transparent',
        paddingHorizontal: 16,
        fontSize: 22,
        color: '#333',
    },
    inputWrap: {
        width: '100%',
        borderWidth: 2,
        borderRadius: 12,
        flexDirection: 'row',
        alignItems: 'center',
    },
    tipsLayout: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 6,
        paddingHorizontal: 6,
    },
    tipImg: {
        width: 22,
        height: 22,
        resizeMode: 'contain',
        tintColor: '#888',
    },
    tipsTxt: {
        fontSize: 15,
        color: '#666',
        marginLeft: 6,
        fontWeight: 'bold',
    },
    tipImgRight: {
        width: 18,
        height: 18,
        resizeMode: 'contain',
        tintColor: '#00CD00',
    },
    tipsTxtRight: {
        fontSize: 15,
        color: '#00CD00',
        marginLeft: 6,
        fontWeight: 'bold',
    },
    tipImgError: {
        width: 18,
        height: 18,
        resizeMode: 'contain',
        tintColor: '#ff3050',
    },
    tipsTxtError: {
        fontSize: 15,
        color: '#ff3050',
        marginLeft: 6,
        fontWeight: 'bold',
    },
    deleteButton: {
        position: 'absolute',
        right: 16,
    },
    deleteImg: {
        width: 24,
        height: 24,
        resizeMode: 'contain',
        borderRadius: 12,
    },
});

RefDemo.tsx

import React, { useRef } from 'react';
import {
  StyleSheet,
  View,
  Button,
  TextInput
} from 'react-native';

import CustomInput from './CustomInput';

export default () => {

    const inputRef = useRef<TextInput>(null);

    return (
        <View style={styles.root}>
            <Button title='聚焦' onPress={() => {
                inputRef.current?.focus();
            }} />
            <Button title='失焦' onPress={() => {
                inputRef.current?.blur();
            }} />
            <CustomInput ref={inputRef}/>
        </View>
    );
}

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: 'white',
        paddingHorizontal: 20,
        paddingTop: 64,
    },
});

函数式组件对外暴露实例（通常是api）

CustomInput2.tsx

import React, { useState, useRef, forwardRef, useImperativeHandle } from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  TextInput,
  LayoutAnimation,
  TouchableOpacity,
} from 'react-native';

import icon_error from '../assets/images/icon_error.png';
import icon_right from '../assets/images/icon_right.png';
import icon_question from '../assets/images/icon_question.webp';
import icon_delete from '../assets/images/icon_delete.png';

export interface CustomInputRef2 {
    customFocus: () => void,
    customBlur: () => void,
}

export default forwardRef((props, ref) => {
    const inputRef = useRef<TextInput>(null);
    const [value, setValue] = useState<string>('');

    const customFocus = () => {
        console.log('customFocus...')
        inputRef.current?.focus();
    }

    const customBlur = () => {
        console.log('customBlur...')
        inputRef.current?.blur();
    }

    useImperativeHandle(ref, () => {
        return {
            customFocus,
            customBlur
        };
    })

    return (
        <View style={styles.root}>
            <View 
                style={[
                    styles.inputWrap, 
                    { borderColor: !value 
                        ? '#888' 
                        : value?.length === 11 
                            ? '#00CD00' 
                            : '#ff3050' }
                ]}>
                <TextInput
                    ref={inputRef}
                    style={styles.input}
                    value={value}
                    keyboardType='number-pad'
                    onChangeText={value => {
                        LayoutAnimation.spring();
                        setValue(value);
                    }}
                    maxLength={11}
                />

                {!!value &&
                    <TouchableOpacity
                        style={styles.deleteButton}
                        onPress={() => {
                            LayoutAnimation.spring();
                            setValue('');
                        }}
                    >
                        <Image style={styles.deleteImg} source={icon_delete} />
                    </TouchableOpacity>
                }
            </View>
            <View style={styles.tipsLayout}>
                {!value ?
                <>
                    <Image style={styles.tipImg} source={icon_question} />
                    <Text style={styles.tipsTxt}>请输入您的手机号</Text>
                </> : value.length === 11 ?
                <>
                    <Image style={styles.tipImgRight} source={icon_right} />
                    <Text style={styles.tipsTxtRight}>输入正确，可进行提交</Text>
                </> :
                <>
                    <Image style={styles.tipImgError} source={icon_error} />
                    <Text style={styles.tipsTxtError}>格式错误，请输入正确手机号</Text>
                </>}
            </View>
        </View>
    );
});

const styles = StyleSheet.create({
    root: {
        width: '100%',
        flexDirection: 'column',
    },
    input: {
        width: '100%',
        height: 56,
        backgroundColor: 'transparent',
        paddingHorizontal: 16,
        fontSize: 22,
        color: '#333',
    },
    inputWrap: {
        width: '100%',
        borderWidth: 2,
        borderRadius: 12,
        flexDirection: 'row',
        alignItems: 'center',
    },
    tipsLayout: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 6,
        paddingHorizontal: 6,
    },
    tipImg: {
        width: 22,
        height: 22,
        resizeMode: 'contain',
        tintColor: '#888',
    },
    tipsTxt: {
        fontSize: 15,
        color: '#666',
        marginLeft: 6,
        fontWeight: 'bold',
    },
    tipImgRight: {
        width: 18,
        height: 18,
        resizeMode: 'contain',
        tintColor: '#00CD00',
    },
    tipsTxtRight: {
        fontSize: 15,
        color: '#00CD00',
        marginLeft: 6,
        fontWeight: 'bold',
    },
    tipImgError: {
        width: 18,
        height: 18,
        resizeMode: 'contain',
        tintColor: '#ff3050',
    },
    tipsTxtError: {
        fontSize: 15,
        color: '#ff3050',
        marginLeft: 6,
        fontWeight: 'bold',
    },
    deleteButton: {
        position: 'absolute',
        right: 16,
    },
    deleteImg: {
        width: 24,
        height: 24,
        resizeMode: 'contain',
        borderRadius: 12,
    },
});

RefDemo2.tsx

import React, { useRef } from 'react';
import {
  StyleSheet,
  View,
  Button,
} from 'react-native';

import CustomInput2, {CustomInputRef2} from './CustomInput2';

export default () => {

    const inputRef = useRef<CustomInputRef2>(null);

    return (
        <View style={styles.root}>
            <Button title='聚焦' onPress={() => {
                inputRef.current?.customFocus();
            }} />
            <Button title='失焦' onPress={() => {
                inputRef.current?.customBlur();
            }} />
            <CustomInput2 ref={inputRef} />
        </View>
    );
}

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: 'white',
        paddingHorizontal: 20,
        paddingTop: 64,
    },
});

react自定义组件中使用ref
一、自定义组件使用ref并且透传子组件ref 自定义组件中使用ref需要用到react的2个hooks：1.for...
refs转发常见案例
1、转发refs到DOM组件 ref 转发是一个可选特性，其允许某些组件接收 ref，并将其向下传递给子组件。这种...
react获取ref
获取子组件的dom，参考官网ref转发或者父子组件、高阶组件文章
2021-02-05 React useImperativeHa
使用函数时组件的时候，ref转发是必须要了解的概念如上，简介明了的解释了ref转发的概念。但是，上面的 ref ...
React中React.forwardRef的使用方式
一、众多周知可以forwardRef可以转发ref属性比如要在父组件中调用子组件中某个DOM节点或者组件的ref ...
如何使用React Refs
如何在React中利用ref以及ref转发，回调ref和HOC React Ref是有用的功能，可作为从父组件中引...
hooks中父组件调用子组件方法或者数据
useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值父组件子组件
高阶组件转发子组件ref
参考链接：react高阶组件+ref转发的组合使用[https://www.cnblogs.com/llcdbk/...
react hook 父组件调用子组件方法
useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值
react ref 常见用法
react ref ref 主要在于提供父组件能直接操作子组件的能力，这里子组件可能是 dom 元素也可能是 re...