我需要定義一個包裝 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在一個 App 頁面中使用 my ，當 App 導航到另一個頁面時，我想清除我的CustomTextInput.

你會怎么做？

uj5u.com熱心網友回復：

理想的解決方案

inputText將是一個道具，而不是本地狀態，onTextChanged道具將處理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} />

uj5u.com熱心網友回復：

如果您想CustomTextInput在 App 導航到另一個頁面時清除控制，那么您可以使用useEffecthookreturn塊（類似于 componentwillunmount）。

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

uj5u.com熱心網友回復：

您可以useEffect在CustomTextInput卸載之前使用鉤子并觸發您的清除程式（在您導航到另一個頁面的情況下）。

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

},[])

標籤：

上一篇：更改下拉值時設定值和觸發動作

下一篇：如何在rtk查詢中除重繪令牌之外的所有請求中使用標頭身份驗證？