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

【问题标题】：How to change the focus of text input when using custom text input使用自定义文本输入时如何更改文本输入的焦点
【发布时间】：2021-06-07 09:08:23
【问题描述】：

1.这是我的自定义文本输入自定义组件，我定义了我想要使用的 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

【问题讨论】：

这段代码有什么问题？
当我提交文本输入时参考没有改变
请问您可以接受还是拒绝回答？如果您将其标记为正确，那么查看您问题的人会知道它是正确的，如果不是，我们可以查看它。谢谢。

标签： javascript reactjs react-native textinput

【解决方案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。

告诉我这是否能解决你的问题！

【讨论】：