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

【问题标题】：React Native Custom TextInput object losing focus after each characterReact Native Custom TextInput 对象在每个字符后失去焦点
【发布时间】：2020-04-27 12:08:53
【问题描述】：

我在输入字符后遇到 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,

    },
})

【问题讨论】：

标签： react-native textinput

【解决方案1】：

您的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,

    },
});

【讨论】：