React Native -如何在按下按钮时在卡片列表中添加表单卡片

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

const App = () => {
  const [cardList, setCardList] = useState([]);

  const addCard = () => {
    setCardList(prevCardList => [...prevCardList, <Card key={prevCardList.length} />]);
  }

  return (
    <View style={styles.container}>
      <Button title="Add Card" onPress={addCard} />
      {cardList.map((card, index) => (
        <View key={index} style={styles.cardContainer}>{card}</View>
      ))}
    </View>
  );
}

const Card = () => {
  const [formData, setFormData] = useState('');

  const handleInputChange = (value) => {
    setFormData(value);
  }

  return (
    <View style={styles.card}>
      <TextInput
        style={styles.input}
        value={formData}
        onChangeText={handleInputChange}
        placeholder="Enter your data"
      />
      <Button title="Submit" onPress={() => console.log(formData)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  cardContainer: {
    marginTop: 10,
  },
  card: {
    backgroundColor: '#fff',
    padding: 10,
    borderRadius: 5,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
  },
});

export default App;