В моем приложении я пытаюсь создать форму для входа в систему.
Когда пользователь вводит что-то в поле ввода токена:
<Input
secureTextEntry
ref={token1}
maxLength={1}
onChange={(e) => this.tokenChange(e, token2)}
/>
И функция tokenChange это:
tokenChange = (e, nextToken) => {
if (nextToken) {
if (nextToken.current) {
if (e.target.value != '') {
nextToken.current.focus();
}
setToken(token1.current.value + token2.current.value + token3.current.value + token4.current.value);
}
}
}
Будет выбран следующий вход. Все работает нормально, я применяю useRef(), чтобы узнать, на каком токене я сейчас фокусируюсь, и я также пытаюсь применить его к элементу Button .
const token1 = useRef();
const token2 = useRef();
const token3 = useRef();
const token4 = useRef();
const submitBtn = useRef();
Проблемавозникает, когда я пытаюсь сосредоточиться на кнопке. Я использую ref={} как для ввода, так и для кнопки, но я не знаю, что делаю неправильно, так как ничего не нашел в документации. Как и входы, я связываю ссылку на кнопку следующим образом:
<Button
raised
title={tituloBtn}
ref={submitBtn}
onPress={() => onSubmit(email, password)}
/>
Итак, я запускаю свое приложение, я могу переходить с одного входа на другой, но при переходе с четвертого токенак кнопке отправки я получаю эту ошибку:
Вот общий код моего функционального компонента:
const FormLogin = ({ titulo, tituloBtn, onSubmit, estadoApp }) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [token, setToken] = useState('');
const token1 = useRef();
const token2 = useRef();
const token3 = useRef();
const token4 = useRef();
const submitBtn = useRef();
tokenChange = (e, nextToken) => {
if (nextToken) {
if (nextToken.current) {
if (e.target.value != '') {
nextToken.current.focus();
}
setToken(token1.current.value + token2.current.value + token3.current.value + token4.current.value);
}
}
}
return (
<View style={estilos.contenedor}>
<Text style={estilos.titulo} h3>{titulo}</Text>
<Espaciador />
<Input
placeholder="correo@ejemplo.com"
value={email}
onChangeText={setEmail}
keyboardType='email-address'
autoCapitalize="none"
autoFocus
label="Ingresa tu correo"
leftIcon={
<MaterialIcons
style={estilos.icon}
name="email"
/>
}
/>
<Espaciador />
<Input
placeholder="******"
value={password}
onChangeText={setPassword}
secureTextEntry
clearTextOnFocus
autoCapitalize="none"
label="Ingresa tu contraseña"
leftIcon={
<Ionicons
style={[estilos.icon, {fontSize: 35}]}
name="md-lock"
/>
}
/>
<View style={estilos.tokenGroup}>
<Input
style={estilos.token}
secureTextEntry
keyboardType='numeric'
ref={token1}
maxLength={1}
onChange={(e) => this.tokenChange(e, token2)}
/>
<Input
style={estilos.token}
secureTextEntry
keyboardType='numeric'
ref={token2}
maxLength={1}
onChange={(e) => this.tokenChange(e, token3)}
/>
<Input
style={estilos.token}
secureTextEntry
keyboardType='numeric'
ref={token3}
maxLength={1}
onChange={(e) => this.tokenChange(e, token4)}
/>
<Input
style={estilos.token}
secureTextEntry
keyboardType='numeric'
ref={token4}
maxLength={1}
onChange={(e) => this.tokenChange(e, submitBtn)}
/>
</View>
{estadoApp.errorMensaje
? <Text style={estilos.error}>{estadoApp.errorMensaje}</Text>
: null}
<Espaciador />
<Button
raised
title={tituloBtn}
ref={submitBtn}
onPress={() => onSubmit(email, password)}
/>
</View>
);
};