React Native Web：TextInput输入单个字符后失焦的问题求解

你遇到的TextInput输入一个字符就失焦的核心问题是：MyTable组件被定义在Blank组件内部。每次Blank组件因setText更新state触发重渲染时，MyTable都会被重新创建为一个全新的组件——这会导致输入字符后，原TextInput被卸载、新TextInput重新挂载，自然就失去了焦点。

以下两种方案都能解决问题，同时满足你将逻辑放在MyTable内部的需求：

方案1：将MyTable提取为独立组件 #

把MyTable移到Blank组件外部，通过props传递状态和更新方法，这样MyTable不会随Blank的重渲染被重新定义：

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

// 提取为独立组件，内部可放置专属逻辑
const MyTable = ({ text, onTextChange }) => {
    // 这里添加你的特定功能逻辑，比如输入格式校验、实时处理等
    return (
        <View>
            <TextInput value={text} onChangeText={onTextChange} />
        </View>
    );
}

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

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

const styles = StyleSheet.create({
    screenView: {
        flex: 1,
        padding: 20
    }
});

方案2：用useMemo缓存内部定义的MyTable #

如果必须将MyTable留在Blank组件内部，可通过useMemo缓存组件，避免每次重渲染都重新创建：

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

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

    // 用useMemo缓存组件，避免重复创建
    const MyTable = useMemo(() => {
        return () => {
            // 这里添加你的特定功能逻辑
            return (
                <View>
                    <TextInput value={text} onChangeText={(input) => setText(input)} />
                </View>
            );
        };
    }, []); // 若MyTable用到其他外部变量，需添加到依赖数组中

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

const styles = StyleSheet.create({
    screenView: {
        flex: 1,
        padding: 20
    }
});

进阶：让MyTable独立管理状态 #

如果希望所有输入相关逻辑都封装在MyTable内部，可让组件自行管理局部状态，仅在需要时同步给父组件：

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

const MyTable = ({ onTextSync }) => {
    const [localText, setLocalText] = useState("");

    // 这里集中处理你的特定功能逻辑
    const handleInput = (input) => {
        // 比如添加输入验证、格式转换等逻辑
        const processedText = input.trim();
        setLocalText(processedText);
        // 同步给父组件（如果需要）
        onTextSync(processedText);
    }

    return (
        <View>
            <TextInput value={localText} onChangeText={handleInput} />
        </View>
    );
}

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

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

const styles = StyleSheet.create({
    screenView: {
        flex: 1,
        padding: 20
    }
});

内容的提问来源于stack exchange，提问作者Dylan Hall