React Native中TextInput无法输入的问题求助

核心问题 #

你用普通变量cohortInput、instructorInput存储输入值，而非React的useState状态变量。React组件仅在状态或props变化时重新渲染，直接修改普通变量不会触发更新，导致输入框value始终保持初始空值，表现为无法输入。

修复方案 #

1. 把普通变量替换为useState状态
2. 用状态更新函数处理输入变化
3. 修正代码里的其他小问题（比如小写组件、样式引用错误）

修复后完整代码 #

import * as React from 'react';
import { Button, SafeAreaView, StyleSheet, Text, View, TextInput } from 'react-native';

function WelcomeScreen({ navigation }) {
    // 用useState管理输入状态
    const [cohortInput, setCohortInput] = React.useState('');
    const [instructorInput, setInstructorInput] = React.useState('');
    const [empty, setEmpty] = React.useState(false);
    const [error, setError] = React.useState(false);
    

    return (
        <View style={styles.container}>
            
            <Text style={styles.text}>
                {'Join cohort: \n'}
            </Text>

            <SafeAreaView>
                <TextInput
                    style={styles.input}
                    placeholder="Enter cohort code"
                    value={cohortInput}
                    onChangeText={(text) => setCohortInput(text)}
                />
            </SafeAreaView>

            {/* 修复样式引用错误 */}
            <Text style={styles.error}>
                {empty ? <Text>  Please enter a code!</Text> : null }
            </Text>
            

            <Text style={styles.text}>{'\n Join as Instructor:'}</Text>
            
            <SafeAreaView>
                <TextInput
                    style={styles.input}
                    placeholder="Enter facilitator code"
                    value={instructorInput}
                    onChangeText={(text) => setInstructorInput(text)}
                />
            </SafeAreaView>

            {/* 修复小写view为大写View */}
            <View style={styles.buttonContainer }>
                <Button
                    title='Join'
                    onPress={() => {
                        if (cohortInput === '')
                            setEmpty(!empty);
                    }}>
                </Button>
            </View> 
            
        </View>

    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffff',
        alignItems: 'center',
        fontSize: 20,
    },
    input: {
        height: 40,
        fontSize: 20,
        borderBlockColor: 'black',
        borderColor: 'black',
        borderRadius: 5,
        // 补充borderWidth确保边框正常显示
        borderWidth: 1,
    },
    text: {
        fontSize: 20,
    },
    error: {
        fontSize: 15,
        color: 'red',
    },
    buttonContainer: {
        width: 70,
        height: 30,
        color: '#0000cd',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 30,
    }
});

export default WelcomeScreen;

关键说明 #

• React受控组件（如TextInput）必须通过状态变量管理value，输入触发状态更新后，组件才会重新渲染并显示新内容。
• 直接修改普通变量无法触发React更新机制，所以输入内容不会同步到界面。
• 额外修复的小问题：
  • 组件名<view>改为<View>（React Native组件名必须大写）
  • 注释中的style.error改为styles.error（样式引用错误）
  • 给input样式添加borderWidth:1，确保边框完整显示

内容的提问来源于stack exchange，提问作者Andrew Vonderhaar