设置可编辑的 UseState false 不会在 React Native 中完全禁用react-native-floating-label-input

Question

我正在我的个人项目中创建用户配置文件部分。我正在使用react-native-floating-label-input库作为输入标签。默认情况下，所有输入字段都有可编辑的 false 属性。我正在使用 useState 在电子邮件的可编辑与 true 或 false 之间切换。代码正在到达函数，状态正在切换，但输入标记仍然接受字符。任何帮助将不胜感激！

这是我在 Profile.js 中切换的函数

const [emailId, editEmailId] = useState(false)
   const [emailIsFocused, editEmailIsFocused] = useState(false)
   function editEmailAddress() {
       console.log("button pressed");
       editEmailId(!emailId);

   }

这是我的输入标签

<StaticFloatingLabelInputComponent alignUnfocusedLabelLeft={true} customLabelStyles={styles.customLabelStyles} editable={emailId} label="Email Id"></StaticFloatingLabelInputComponent><TouchableOpacity style={styles.EditEmailLabel} onPress{editEmailAddress}>
<Image source={editLabel} style={{ height: 30, width: 30 }}></Image>
</TouchableOpacity>
</View> 

staticFloatingLabelComponent组件js中相关部分代码

return (
        <View style={{position: 'relative', marginTop: verticalScale(props.marginTop)}}>
            <FloatingLabelInput
                label={props.label}
                value={props.dateString}
                editable={false}
                containerStyles={[ styles.InputContainerStyles, {
                    borderColor: props.dateString ? colors.focusedInputFieldBorder : colors.unfocusedInputFieldBorder,
                    backgroundColor: props.dateString ? colors.focusedInputFieldBackground : colors.unfocusedInputFieldBackground
                }
                ]}
                customLabelStyles={styles.customLabelStyles}
                labelStyles={styles.labelStyles}
                inputStyles={styles.inputStyles}
            />

            <TouchableOpacity activeOpacity={0} style={styles.invisibleDatePickerButton} onPress={props.showDatepicker} >
                <Text></Text>
            </TouchableOpacity>
        </View>
    );

任何帮助将不胜感激！！

Answer 1

return (
    <View style={{position: 'relative', marginTop: verticalScale(props.marginTop)}}>
        <FloatingLabelInput
            label={props.label}
            value={props.dateString}
            editable={props.editable}  // Use props.editable here instead of hardcoded false
            containerStyles={[ styles.InputContainerStyles, {
                borderColor: props.dateString ? colors.focusedInputFieldBorder : colors.unfocusedInputFieldBorder,
                backgroundColor: props.dateString ? colors.focusedInputFieldBackground : colors.unfocusedInputFieldBackground
            }
            ]}
            customLabelStyles={styles.customLabelStyles}
            labelStyles={styles.labelStyles}
            inputStyles={styles.inputStyles}
        />

        <TouchableOpacity activeOpacity={0} style={styles.invisibleDatePickerButton} onPress={props.showDatepicker} >
            <Text></Text>
        </TouchableOpacity>
    </View>
);

此外，请确保正确记录

emailId

const [emailId, setEmailId] = useState(false);  // you should initialize the state

function editEmailAddress() {
    console.log("button pressed");
    setEmailId(!emailId);  // Correct function to toggle the state
}

<StaticFloatingLabelInputComponent
    alignUnfocusedLabelLeft={true}
    customLabelStyles={styles.customLabelStyles}
    editable={emailId}
    label="Email Id"
/>
<TouchableOpacity style={styles.EditEmailLabel} onPress={editEmailAddress}>
    <Image source={editLabel} style={{ height: 30, width: 30 }}></Image>
</TouchableOpacity>
</View>

让我知道这是否有效！