Я хочу сделать поле ввода, которое возвращает вмененный текст в нижнем регистре. я использую выставку
const [login, setLogin] = useState('');
//...
<TextInput style = {{backgroundColor:'#bbb'}}
value = {login}
onChangeText = {(val)=>setLogin(val.toLowerCase())}
placeholder = "email or username"
></TextInput>
Я получаю странный результат при тестировании на своем устройстве.
мой ввод: 'K' => логин = 'k'
мой ввод: 'k' => логин = 'kkk'
мой ввод: 'k' => логин = 'kkkkkkk'
Возможно, вам придется попробовать несколько раз, чтобы воссоздать мой результат, так как это происходит не каждый раз. Когда я удаляю .toLowerCase()
, он работает правильно.
Я сделал работающий пример для проверки. Запуск его в веб-режиме работает нормально, но когда я запускаю его на своем устройстве, возникает та же ошибка, что и в моем проекте.
Вот видео того, что происходит со мной, когда я запускаю его на Android 10. Вы можете видеть, что это происходит не всегда, но иногда это регистрируется так, как будто я нажал «q» три раза, когда я только нажал его дважды
Ставлю useEffect(() => {console.info(login)});
но результат тот же
Происходит что-то странное, я сделал работоспособный пример для проверки. Запуск его в веб-режиме работает нормально, но когда я запускаю его на своем устройстве, возникает та же ошибка, что и в моем проекте. Может ли кто-нибудь еще проверить это на своем телефоне, чтобы увидеть, выдает ли он ту же ошибку? Вот исполняемый пример связь
Вы можете увидеть, о чем я говорю, в видео, которое я добавил
Я думаю, вы столкнулись с известной ошибкой react-native
, связанной с вводом текста и использованием заглавных букв на платформе Android. Откройте проблему №27449 на github.
В качестве обходного пути вы можете заставить ввод текста использовать тип клавиатуры visible-password
на Android.
Рабочий пример для проверки:
import React, { useState } from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';
import { Platform } from 'react-native';
export default function App() {
const [login, setLogin] = useState('');
return (
<View style = {styles.container}>
<TextInput style = {{backgroundColor:'#bbb'}}
value = {login}
onChangeText = {(val)=>setLogin(val.toLowerCase())}
keyboardType = {Platform.OS === 'ios' ? 'default' : 'visible-password'}
placeholder = "email or username"
></TextInput>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 80,
},
});
Кредит на обходной путь принадлежит Саймон-Дэвис-Автура
Можете ли вы попробовать сами, чтобы увидеть, возникает ли ошибка и у вас? Вот мое доказательство того, что я удалил только
.toLowerCase()
и это работает связь