React Native实现输入框下方显示列表项的方法

你的代码逻辑方向是对的，但有几处细节调整后才能正常工作，以下是修正后的完整实现：

关键修正点 #

• TextInput的回调属性应该用onChangeText（而非onClickText），这是React Native中监听输入内容变化的正确属性
• 添加目标后清空输入框，提升用户体验
• 避免添加空内容，增加输入校验
• 列表项的key改用索引+文本组合，防止重复内容导致的key冲突

完整代码 #

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

export default function App() {
    const [enteredGoalText, setEnteredGoalText] = useState('');
    const [courseGoals, setCourseGoals] = useState([]);

    // 实时同步输入框内容到状态
    function goalInputHandler(enteredText){
        setEnteredGoalText(enteredText);
    }

    // 添加目标到列表并清空输入框
    function addGoalHandler(){
        // 过滤空内容（去掉前后空格后仍为空则不添加）
        if (enteredGoalText.trim()) {
            // 函数式更新确保拿到最新的列表状态
            setCourseGoals((currentCourseGoals) => [
                ...currentCourseGoals,
                enteredGoalText,
            ]);
            // 清空输入框
            setEnteredGoalText('');
        }
    }

    return (
        <View style={styles.AppContainer}>
            <View style={styles.inputContainer}>
                <TextInput 
                    style={styles.textInput} 
                    placeholder="你的课程目标！" 
                    onChangeText={goalInputHandler}
                    value={enteredGoalText} // 绑定状态，确保清空后输入框同步更新
                />
                <Button title="添加目标" onPress={addGoalHandler}/>
            </View>
            <View style={styles.goalsContainer}>
                {/* 遍历目标列表，渲染每个项 */}
                {courseGoals.map((goal, index) => (
                    <Text key={`${index}-${goal}`} style={styles.goalItem}>{goal}</Text>
                ))}
            </View>
        </View>
    );
}

// 配套样式，优化布局和视觉效果
const styles = StyleSheet.create({
    AppContainer: {
        flex: 1,
        paddingTop: 50,
        paddingHorizontal: 16,
    },
    inputContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 24,
    },
    textInput: {
        borderWidth: 1,
        borderColor: '#ccc',
        padding: 8,
        width: '75%',
        borderRadius: 4,
    },
    goalsContainer: {
        flex: 1,
    },
    goalItem: {
        padding: 12,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
        marginBottom: 8,
    }
});

逻辑说明 #

1. 状态管理：用两个useState分别维护输入框内容（enteredGoalText）和目标列表（courseGoals）
2. 输入监听：通过onChangeText将输入框的每一次变化同步到状态中
3. 添加逻辑：点击按钮时先校验输入非空，再用扩展运算符...将新目标追加到现有列表末尾，最后清空输入框
4. 列表渲染：用map遍历目标列表，为每个项生成独立的Text组件，确保每个项有唯一的key值

内容的提问来源于stack exchange，提问作者Raghav Sood