使用自定义文本输入时如何更改文本输入的焦点

Question

1.Here 是我的自定义文本输入自定义组件，我定义了我想在其中使用的 props ref 父组件

export const InputField = ({
placeholder,
onChangeText,
placeholderTextColor,
showSecureIcon,
isSecure,
onPressIcon,
keyboardType,
returnKeyType,
maxLength,
secureIconColor,
handleUseCallBack,
ref,
value
 }) => {


return (
    <View style={styles.container}>
        <TextInput
            style={styles.input}
            placeholder={placeholder}
            onChangeText={onChangeText}
            placeholderTextColor={placeholderTextColor}
            autoCapitalize="none"
            secureTextEntry={isSecure}
            keyboardType={keyboardType}
            returnKeyType={returnKeyType}
            maxLength={maxLength}
            value={value}
            ref={ref}
        />
        <View style={styles.iconContainer}>
            {showSecureIcon ?
                <TouchableOpacity
                    onPress={onPressIcon}
                >
                    <Ionicons
                        name={isSecure ? "eye-off-sharp" : "eye-sharp"}
                        color={secureIconColor}
                        size={constants.vw(25)}
                    />
                </TouchableOpacity>

                :
                null
            }
        </View>
    </View>
)
}

2-现在是我要更改参考的部分在此字段中，我创建密码的文本输入字段并确认我要更改的位置我的重点

   const passwordRef = useRef(null);
   const confirmPasswordRef = 
   useRef(null);
   
   const onSubmitEditing=()=>{
   confirmPasswordRef.current.focus();
    }

                 <View style={{ marginTop: constants.vh(66) }}>
                <Components.InputField
                    placeholder={constants.ConstStrings.setANewPassword}
                    ref={passwordRef}
                    onSubmitEditing={()=>onSubmitEditing()}
                    onChangeText={(text) => setState({
                        ...state,
                        password: text
                    })}
                />
            </View>
            <View style={{ marginTop: constants.vh(20) }}>
                <Components.InputField
                    ref={confirmPasswordRef}
                    placeholder={constants.ConstStrings.confirmPassword}
                    onChangeText={(text) => setState({
                        ...state,
                        confirm_password: text
                    })}
                />
            </View>

这部分是结束部分qwertyuiopsdf;';dsyuiopoiuteweryuiopuytreep[gfjklvcvbnm,mvcxzxcewqwe[poiuyd

Answer 1

您的代码存在问题，您创建了一个自定义输入组件，但没有向其提供有关如何处理不同方法的说明。

因此，在您的情况下，通用 Input 组件知道什么方法 focus，但您的自定义组件不知道。

你应该做什么：

将您的输入组件设为 forwardRef，这样您就可以将 ref 传递给它，然后可以对其执行操作。
使用 useImperativeHandle 以便您可以调用引用的内部方法。
创建一个 focus fn，它在您的自定义输入中基本上会调用您的引用的 focus 方法。

您不能像现在这样在 props 中传递 ref，这在 React 中不起作用。

我想您的所有组件都可以正常工作，在这种情况下：

export const InputField = React.forwardRef({
placeholder,
...
}, ref) => { // pass a ref to here, this way you will let React know to associate the ref from external component to an internal ref

const textInput = useRef(null); // Create a ref to pass to your input

useImperativeHandle(ref, () => ({ // To be able to call `focus` from outside using ref
  focus,
});

const focus = textInput.current.focus();

return (
    <View style={styles.container}>
        <TextInput
            ref={textInput}
            style={styles.input}
            ...
        />
        ...
    </View>
)
}

然后在您的组件中，您只需传递一个由 useRef 创建的新 ref，然后您就可以在 focus 中调用 focus。

告诉我这是否为您解决了问题！

使用自定义文本输入时如何更改文本输入的焦点

How to change the focus of text input when using custom text input

javascript

textinput

reactjs

react-native