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

Posted 2023-04-18

【中文标题】React Native Custom TextInput 对象在每个字符后失去焦点

【英文标题】：React Native Custom TextInput object losing focus after each character

【发布时间】：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,

    ,
)

【参考方案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,

    ,
);