React Native中useState控制editable为false仍无法禁用react-native-floating-label-input

核心问题定位 #

你遇到的问题是：editable状态已成功切换，但输入框仍能接收字符。主要原因有三点：

1. 输入框聚焦状态未与editable状态联动，当editable设为false时，输入框若处于聚焦状态仍可能允许输入
2. 子组件内部的焦点状态未与父组件同步，切换editable时未强制失焦
3. onChangeText未受editable状态限制，即使不可编辑仍会执行值更新逻辑

具体修复方案 #

1. 父组件（Profile.js）修改

• 传递焦点状态和焦点变化回调给子组件
• 切换editable状态时，若改为不可编辑则强制输入框失焦

const [emailId, editEmailId] = useState(false)
const [emailIsFocused, editEmailIsFocused] = useState(false)

function editEmailAddress() {
    console.log("button pressed");
    const newEditableState = !emailId;
    editEmailId(newEditableState);
    // 切换为不可编辑时强制失焦
    if (!newEditableState) {
        editEmailIsFocused(false);
    }
}

// 输入框组件调用修改
<View style={styles.labelWrapper}>
  <StaticFloatingLabelInputComponent 
    alignUnfocusedLabelLeft={true} 
    customLabelStyles={styles.customLabelStyles} 
    editable={emailId} 
    label="Email Id"
    isFocused={emailIsFocused}
    onFocusChange={(focused) => editEmailIsFocused(focused)}
  />
  <TouchableOpacity style={styles.EditEmailLabel} onPress={editEmailAddress}>
    <Image source={editLabel} style={{ height: 30, width: 30 }} />
  </TouchableOpacity>
</View>

2. 子组件（StaticFloatingLabelInputComponent）修改

• 监听editable变化，不可编辑时强制失焦
• 同步父组件传递的焦点状态
• 限制onChangeText仅在可编辑时执行

function StaticFloatingLabelInputComponent(props) {
    const [inputValue, setInputValue] = useState('');
    const [isFocused, setIsFocused] = useState(false);
    
    useEffect(() => {
        console.log("editable value: ", props.editable);
        // editable变为false时强制失焦
        if (!props.editable) {
            setIsFocused(false);
            props.onFocusChange?.call(null, false);
        }
    }, [props.editable]);

    // 同步父组件的焦点状态
    useEffect(() => {
        if (props.isFocused !== undefined) {
            setIsFocused(props.isFocused);
        }
    }, [props.isFocused]);

    return (
        <View style={{ marginTop: props.marginTop ? verticalScale(props.marginTop) : 0 }}>
            <FloatingLabelInput 
                label={props.label}
                value={inputValue}
                staticLabel={true}
                onFocus={() => {
                    const focused = true;
                    setIsFocused(focused);
                    props.onFocusChange?.call(null, focused);
                }}
                onBlur={() => {
                    const focused = false;
                    setIsFocused(focused);
                    props.onFocusChange?.call(null, focused);
                }}
                isFocused={isFocused}
                editable={props.editable} 
                onChangeText={(value) => {
                    // 仅在可编辑时更新输入值
                    if (props.editable) {
                        setInputValue(value);
                    }
                }}
                containerStyles={[styles.InputContainerStyles, { 
                    paddingHorizontal: props.alignUnfocusedLabelLeft ? 0 : horizontalScale(0), 
                    borderColor: isFocused ? colors.focusedInputFieldBorder : colors.unfocusedInputFieldBorder, 
                    backgroundColor: isFocused ? colors.focusedInputFieldBackground : colors.unfocusedInputFieldBackground, 
                    position: 'relative'
                }]}
                customLabelStyles={props.customLabelStyles || styles.customLabelStyles}
                labelStyles={styles.labelStyles}
                inputStyles={styles.inputStyles}
            />
        </View>
    );
}

3. 额外检查

如果以上修复仍无效，建议升级react-native-floating-label-input到最新稳定版，部分旧版本存在editable属性失效的bug：

npm update react-native-floating-label-input
# 或使用yarn
yarn upgrade react-native-floating-label-input

内容的提问来源于stack exchange，提问作者Roshan Bhatia