javascript React Native TextInput Package 器组件，如何从“外部”清除值

r1zhe5dt 于 2023-03-21 发布在 Java

关注(0)|答案(3)|浏览(133)

我需要定义一个 Package TextInput的组件，因为我的应用程序中有很多文本输入，我希望它们有一个垃圾桶图标来清除文本和一个通用的样式。
我的组件是这样的：

import React from 'react';
import {
    TextInput,
    TouchableOpacity,
    StyleSheet,
    View,
    ReturnKeyTypeOptions,
    Platform,
} from 'react-native';
import Numerics from '../constants/Numerics';
import { Ionicons } from '@expo/vector-icons';
import Colors from '../constants/Colors';

interface Props {
    placeholder?: string;
    iconName?: string;
    returnKeyType?: ReturnKeyTypeOptions;
    backgroundColor?: string;
    margin?: number;
    marginBottom?: number;
    onTextChanged?(text: string): void;
    onFinishedEditing?(text: string): void;
    onClearTextInput?(): void;
}

const defaultProps: Props = {
    backgroundColor: Colors.textInputBackgroundColor,
    placeholder: '',
    iconName: '',
    returnKeyType: 'none',
    margin: 0,
    onTextChanged: (text) => {},
    onFinishedEditing: (text) => {},
    marginBottom: 0,
};

const CustomTextInput: React.FC<Props> = (props) => {
    const [inputText, setInputText] = React.useState('');

    const onCancelSearchHandler = () => {
        setInputText('');
        if (props.onTextChanged) {
            props.onTextChanged('');
        }
        if (props.onClearTextInput) props.onClearTextInput();
    };

    let clearTextComponent = <View></View>;

    if (inputText) {
        clearTextComponent = (
            <TouchableOpacity onPress={onCancelSearchHandler}>
                <Ionicons
                    name='trash-outline'
                    color={Colors.greyColor}
                    size={Numerics.iconsSize}
                />
            </TouchableOpacity>
        );
    }

    return (
        <View
            style={[
                styles.searchBarContainer,
                {
                    backgroundColor: props.backgroundColor,
                    margin: props.margin,
                    marginBottom: props.marginBottom,
                },
            ]}>
            <Ionicons
                name={props.iconName}
                color={Colors.greyColor}
                size={Numerics.iconsSize}
            />
            <TextInput
                style={styles.textInput}
                keyboardType='default'
                returnKeyType={props.returnKeyType}
                value={inputText}
                onChangeText={(text) => {
                    setInputText(text);
                    if (props.onTextChanged) {
                        props.onTextChanged(text);
                    }
                }}
                onEndEditing={(event) => {
                    if (props.onFinishedEditing) {
                        props.onFinishedEditing(event.nativeEvent.text);
                    }
                }}
                placeholder={props.placeholder}
                autoCorrect={false}
            />
            {clearTextComponent}
        </View>
    );
};

CustomTextInput.defaultProps = defaultProps;

const styles = StyleSheet.create({
    searchBarContainer: {
        flexDirection: 'row',
        backgroundColor: Colors.textInputBackgroundColor,
        borderRadius: 10,
        height: 50,
        padding: 5,
        alignItems: 'center',
    },

    textInput: {
        flex: 1,
        marginLeft: 10,
    },
});

export default CustomTextInput;

主要特点是：

在TextInput的左侧有一个可自定义的图标
在TextInput的右边有一个“清除文本”按钮图标，如果没有文本，它就会消失
文本编辑结束时触发的处理程序
CustomTextInput有自己的状态来使明文按钮工作

一切正常，但我真的不知道如何才能从外部清除文本 *！考虑到我在应用程序页面中使用CustomTextInput，当应用程序导航到另一个页面时，我想清除我的CustomTextInput。
你会怎么做？

JavaScript

来源：https://stackoverflow.com/questions/70649688/react-native-textinput-wrapper-component-how-to-clear-the-value-from-outside

3条答案

按热度按时间

mqxuamgl1#

理想方案

inputText将是一个prop，而不是本地状态，onTextChanged prop将处理父组件中某个位置的inputText的更改。

备选方案：

useImperativeHandle钩子：

const CustomTextInput = React.forwardRef((props, ref) => {
    const [inputText, setInputText] = React.useState('');

    const onCancelSearchHandler = () => {
        setInputText('');
        if (props.onTextChanged) {
            props.onTextChanged('');
        }
        if (props.onClearTextInput) props.onClearTextInput();
    };

    useImperativeHandle(ref, () => ({
        clear: () => {
          onCancelSearchHandler();
          // or just setInputText('');
        }
    }));

    //...
})

然后在父组件中：

const textInputRef = useRef();

const clearInput = () => {
    textInputRef.current.clear()
}

//...

<CustomTextInput ref={textInputRef} />

赞(0）回复(0）举报 2023-03-21

q8l4jmvw2#

如果你想在应用程序导航到另一个页面时清除CustomTextInput控件，那么你可以使用useEffect钩子return块（类似于componentwillunmount）。

useEffect(() => {
  retrun () => {
    onCancelSearchHandler();
  }
},[]);

赞(0）回复(0）举报 2023-03-21

mzaanser3#

您可以在CustomTextInput中使用useEffect钩子，并在清除过程被卸载之前触发它（在您的情况下，当您导航到另一个页面时）。

useEffect(()=>{
  
  // the returned function is fired right before the component is unmounted.
  retrun ()=>{
    // do what it takes to clear the input here
    onCancelSearchHandler();
  }

},[])

赞(0）回复(0）举报 2023-03-21

我来回答

javascript React Native TextInput Package 器组件，如何从“外部”清除值

3条答案

理想方案

备选方案：

相关问题

热门标签

最新问答