在ReactNative中修改元素的屬性

我對 React Native 很陌生，我想在 Textinput 中創建一個非常簡單的密碼顯示按鈕。TouchableOpacity 觸發了非常簡單的 showPassword 函式并將 var passwordHidden 更改為 false。但遺憾的是 reactTextInput 沒有更新，密碼一直隱藏。任何想法為什么？

export function TextInput(props: Props) {
    let passwordHidden = true


    function showPassword() {
        passwordHidden = false
    }

    return (
        <View style={{marginBottom: props.marginBottomProp}}>
            <FormComponentMargin>
                <View style={styles.container}>
                    <View style={{width: 48, alignItems: 'center'}}>
                         <Icon
                            name={props.icon}
                            type={props.iconType ?? "font-awesome"}/>
                    </View>
                    <ReactTextInput
                        style={{...styles.textInput}}
                        placeholderTextColor={placeholderTextColor}
                        secureTextEntry={passwordHidden}
                        {...props}
                    />

                    <TouchableOpacity onPress={showPassword}>
                                <View
                                    style={{width: 48, alignItems: 'center', position: 'absolute', right: 0, bottom: 0}}>
                                    <Icon
                                        name={"eye"}
                                        type={props.iconType ?? "font-awesome"}
                                        color={tintColor}
                                        size={20}

                                    />
                                </View>
                     </TouchableOpacity>
                </View>
            </FormComponentMargin>
        </View>
    )
}

uj5u.com熱心網友回復：

點擊按鈕后，您需要重新渲染組件，因此將變數作為狀態處理。

使用useState鉤子 -

import React, {useState} from 'react';

export function TextInput(props: Props) {

    const [passwordHidden, setPasswordHidden] = useState(true);
 
    function showPassword() {
        setPasswordHidden(!passwordHidden);
    }

    return (
        <View style={{marginBottom: props.marginBottomProp}}>
            <FormComponentMargin>
                <View style={styles.container}>
                    <View style={{width: 48, alignItems: 'center'}}>
                         <Icon
                            name={props.icon}
                            type={props.iconType ?? "font-awesome"}/>
                    </View>
                    <ReactTextInput
                        style={{...styles.textInput}}
                        placeholderTextColor={placeholderTextColor}
                        secureTextEntry={passwordHidden}
                        {...props}
                    />

                    <TouchableOpacity onPress={showPassword}>
                                <View
                                    style={{width: 48, alignItems: 'center', position: 'absolute', right: 0, bottom: 0}}>
                                    <Icon
                                        name={"eye"}
                                        type={props.iconType ?? "font-awesome"}
                                        color={tintColor}
                                        size={20}

                                    />
                                </View>
                     </TouchableOpacity>
                </View>
            </FormComponentMargin>
        </View>
    )
}

標籤：javascript反应式

上一篇：與朋友和家人分享ios應用程式的最便宜方式？

下一篇：在Laravel的API中顯示反應消費串列