Реагировать на собственный собственный объект TextInput, теряя фокус после каждого символа - PullRequest
Новая
       6

Реагировать на собственный собственный объект TextInput, теряя фокус после каждого символа

1 голос
/ 09 января 2020

У меня проблема с потерей фокуса в TextInput после ввода символа. Это происходит только в моем пользовательском объекте TextInput. После ввода каждого символа клавиатура закрывается, и мне приходится повторно выбирать объект, чтобы вернуть клавиатуру.

Я запускаю этот код только на телефоне Android. Я не уверен, как работает iOS.

Я просмотрел множество тем на этом и других сайтах и ​​не могу найти ничего, что помогло бы сфокусироваться.

В следующем коде я включил 2 объекта TextInput. Одним из них является мой пользовательский объект, MyTextInput. Другой - это общий c объект TextInput. При вводе текста в формате c один фокус не теряется и клавиатура не сбрасывается. В кастоме один фокус теряется и клавиатура уходит.

Любая помощь будет оценена. 

import React, { Component , useState} from 'react';
import {
  View,
  Text,
  TextInput,
  Button,
  StyleSheet,

} from 'react-native';

const Form = () => {

    const [values, setValues] = useState({ email: "", a: ""});

    const MyTextInput = ({ valueVar, name, type, onChange }) => {
       return (
            <TextInput

                style={styles.textInputStyle}
                value={valueVar}
                onChangeText={text => onChange({ name, type, text })}
            />
       );
    };

    const handleChange = (event) => {
        const {name, type, text} = event;
        setValues({...values, [name]: text})
    }


    const handleChangeTI = (text) => {
        setValues({...values, a: text})
    }

    return (
        <View style={styles.containerStyle}>
            <View>
                <Text style={styles.textStyle}>email </Text>
                <MyTextInput
                    name="email"
                    type="text"
                    valueVar={values.email}
                    onChange={handleChange}
                >
                </MyTextInput>
            </View>
            <View>
                <Text style={styles.textStyle}>TextInput</Text>
                <TextInput
                    style={styles.textInputStyle}
                    value={values.a}
                    onChangeText={handleChangeTI}
                />
            </View>
        </View>
    );      // return
};      //  const

export default Form;

const styles = StyleSheet.create ({
    containerStyle:
    {
        flexDirection:'column',
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
        backgroundColor: 'white',
    },
    textStyle:
    {
        color: 'green',
        height: 30,
        width: 200,
        fontSize: 18,
    },
    textInputStyle:
    {
        color: 'black',
        height: 40,
        width: 200,
        borderWidth: 1,
        borderColor: 'red',
        backgroundColor: 'gray',
        textDecorationLine: 'none',
        fontSize: 15,

    },
})

1 Ответ

0 голосов
/ 09 января 2020

Ваши MyTextInput компоненты воссоздаются и перерисовываются каждый раз, когда вы что-то печатаете. Переместите функцию в новый файл или за пределы компонента Form. 

import React, { Component , useState } from 'react';
import {
  View,
  Text,
  TextInput,
  Button,
  StyleSheet,
} from 'react-native';


const MyTextInput = ({ valueVar, name, type, onChange }) => {
   return (
        <TextInput
            style={styles.textInputStyle}
            value={valueVar}
            onChangeText={text => onChange({ name, type, text })}
        />
   );
};

const Form = () => {
    const [values, setValues] = useState({ email: "", a: ""});

    const handleChange = (event) => {
        const {name, type, text} = event;
        setValues({...values, [name]: text})
    }

    const handleChangeTI = (text) => {
        setValues({...values, a: text})
    }

    return (
        <View style={styles.containerStyle}>
            <View>
                <Text style={styles.textStyle}>email </Text>
                <MyTextInput
                    name="email"
                    type="text"
                    valueVar={values.email}
                    onChange={handleChange}
                >
                </MyTextInput>
            </View>
            <View>
                <Text style={styles.textStyle}>TextInput</Text>
                <TextInput
                    style={styles.textInputStyle}
                    value={values.a}
                    onChangeText={handleChangeTI}
                />
            </View>
        </View>
    );      // return
};      //  const

export default Form;

const styles = StyleSheet.create({
    containerStyle:
    {
        flexDirection:'column',
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
        backgroundColor: 'white',
    },
    textStyle:
    {
        color: 'green',
        height: 30,
        width: 200,
        fontSize: 18,
    },
    textInputStyle:
    {
        color: 'black',
        height: 40,
        width: 200,
        borderWidth: 1,
        borderColor: 'red',
        backgroundColor: 'gray',
        textDecorationLine: 'none',
        fontSize: 15,

    },
});
...