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

Question

我正在创建一个添加按钮，卡片中的每个卡片都包含三个输入。 我希望用户单击添加的新MultiCityCard，以及如何管理其状态（如屏幕截图）。

<View style={{}}>
    <MultiCityCard title="Flight 1" />
    <MultiCityCard title="Flignt 2" />
    <Button
      icon={{
        name: 'plus',
        size: 20,
        color: 'white',
        type: 'entypo',
      }}
      title="Add another flight"
      containerStyle={{ padding: 20 }}
    />
  </View>

Answer 1

将数据放入数组中。 例如

data: [
  {
   from: '',
   to: '',
  }
]

，然后单击添加，将新元素推送到此数组。例如

this.setState({ data: [{ from: '', to: ''},...this.state.data]})

然后您可以根据索引编辑或查看数据。 例如

data.map((item, index) => <Button onPress={() => {
// here you have access to the index 
} }
/>);

如果您想要更详细的示例，我为您发布了一份小吃 https://snack.expo.io/@azaabudeen/Y2FyZW