React Native Custom TextInput对象在每个字符后失去焦点

Question

我在键入字符后TextInput失去焦点时遇到问题。它仅在我的自定义TextInput对象中发生。键入每个字符后，将键盘关闭，我必须重新选择该对象才能恢复键盘。

我只在Android手机上运行此代码。我不确定iOS如何运作。

我浏览了该站点上的许多线程以及其他线程，但找不到任何可保持焦点的东西。

在下面的代码中，我包括2个TextInput对象。一个是我的自定义对象MyTextInput。另一个是通用的TextInput对象。当在通用文本中输入文本时，一个焦点不会丢失并且不会关闭键盘。在习惯中，一个焦点丢失并且键盘消失。

将提供任何帮助。

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,

    },
})

Answer 1

您的MyTextInput组件将在您每次键入内容时重新创建并重新呈现。将下面的功能移到新文件中或在Form组件之外。

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