Как преобразовать строку в нижний регистр? .toLowerCase() не работает должным образом

Я хочу сделать поле ввода, которое возвращает вмененный текст в нижнем регистре. я использую выставку

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» три раза, когда я только нажал его дважды

Можете ли вы попробовать сами, чтобы увидеть, возникает ли ошибка и у вас? Вот мое доказательство того, что я удалил только .toLowerCase() и это работает связь

Srki 20.03.2022 14:24

Ставлю useEffect(() => {console.info(login)}); но результат тот же

Srki 20.03.2022 14:39

Происходит что-то странное, я сделал работоспособный пример для проверки. Запуск его в веб-режиме работает нормально, но когда я запускаю его на своем устройстве, возникает та же ошибка, что и в моем проекте. Может ли кто-нибудь еще проверить это на своем телефоне, чтобы увидеть, выдает ли он ту же ошибку? Вот исполняемый пример связь

Srki 20.03.2022 15:25

Вы можете увидеть, о чем я говорю, в видео, которое я добавил

Srki 20.03.2022 21:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
4
89
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, вы столкнулись с известной ошибкой 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,
  },
});

Кредит на обходной путь принадлежит Саймон-Дэвис-Автура

Другие вопросы по теме