Input Component 不支持 React useRef Hook on re-mounting 组件

Posted 2023-02-25

【中文标题】Input Component 不支持 React useRef Hook on re-mounting 组件

【英文标题】：Input Component doesn't support React useRef Hook on re-mounting the component

【发布时间】：2021-05-04 14:23:31

【问题描述】：

我正在为登录页面使用钩子，其中文本输入在 1 秒后集中在 组件安装 上。 下面提到的代码适用于第一次安装。如果我们在注销后返回登录屏幕，我会在 1 秒后收到此错误。 （错误在下面提到）

我的代码：（只是粗略！！希望你能理解）

import React, useState, useRef, useEffect from 'react';

function Login(props) 
....................
const inputRef = useRef(null);
.............................

useEffect(() => 
setTimeout(() => 
  inputRef.current.focus();
 , 1000);
, []);

......................
return(
.....................
<TextInput
        ref=inputRef
        label="Enter your name"
/>

)



export default Login;

错误：

身份验证流程：

function RootNavigation(props) 
  const loginState = useSelector(state => state.LoginSlice.loginStatus);
  const otpLoginState = useSelector(state => state.OtpConfirmSlice.loginStatus);
  return (
    <>
      loginState || otpLoginState ? <MyDrawer /> : <StartScreenNavigation />
    </>
  );

【参考方案1】：

你为什么不在这里使用autoFocus prop，像这样

<TextInput
    ref=inputRef
    label="Enter your name"
    autoFocus=true // This will get focused it when it gets loaded.
/>

如果您在页面上有一个输入框，那很好......但是如果您有多个带有 autoFocus=true 的输入，这将失败，在这种情况下，它将专注于最后一个 TextInput 组件

工作示例here

你的code 应该看起来像

import React,  useState, useRef, useEffect  from 'react';
import  TextInput  from 'react-native';

function Login(props) 
  return <TextInput placeholder="Enter your name" autoFocus=true />;


export default Login;

2秒后对焦

你可以像这样在屏幕中添加一个监听器

  React.useEffect(() => 
    const unsubscribe = navigation.addListener('focus', () => 
      setTimeout(() => 
        // Execute something here
      , 2000);
    );

    return unsubscribe;
  , [navigation]);

然后在您的Login 屏幕中，您可以这样做

import * as React from 'react';
import  Text, View, StyleSheet, TextInput  from 'react-native';
import Constants from 'expo-constants';

function LoginScreen( navigation ) 
  const inputRef = React.useRef(null);

  React.useEffect(() => 
    const unsubscribe = navigation.addListener('focus', () => 
      setTimeout(() => 
        console.log('Executed After 2 seconds');
        inputRef.current.focus();
        // Here input will get focused after 2 seconds
      , 2000);
    );

    return unsubscribe;
  , [navigation]);

  return (
    <View style=styles.container>
      <TextInput
        ref=inputRef
        placeholder="Enter your name here"
        style= padding: 10 
      />
    </View>
  );


export default LoginScreen;

【讨论】：

是的！这可行，但安装后我需要 2 秒的间隙。

是Login screen??

是的登录是一个屏幕

完美！.. 那么我的解决方案将为您完成这项工作。

还要再检查一下Snack...它会在两秒后使输入成为焦点