Web 上 React Native 中的 TextInput 错误，在失去焦点之前仅输入一个字符

Question

我遇到的问题是，当我有一个 textInput 时，我只能输入一个字符，然后 TextInput 就会失去焦点。

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, TextInput } from 'react-native';

const Blank = ({ navigation, route }) => {
    const [text, setText] = useState("");

    const MyTable = () => {
        //functions
        return (
            <View>
                <TextInput value={text} onChangeText={(input) => setText(input)} />
            </View>
        );
    }

    return (
        <View style={styles.screenView}>
            <MyTable />
        </View>
    );
}

我尝试将 TextInput 直接移动到“Blank”的返回块中，这确实解决了问题，但我有某些功能需要在 MyTable 函数中执行。有没有什么方法可以在不使用 useEffect 的情况下完成这项工作，因为我的实际项目相当大，而且我不希望在我的 useEffect 中出现一堆不必要的代码，而它可能位于 MyTable 中

Answer 1

您可以在主函数之外创建该函数

const Blank = ({ navigation, route }) => {
const [text, setText] = useState("");

return (
    <View style={styles.screenView}>
        <MyTable text={text} setText={setText}/>
    </View>
)}

const MyTable = ({ text, setText }) => {
return (
    <View>
        <TextInputCustom value={text} onChangeText={(input) => setText(input)} />
    </View>
)}