如何从列表中选择一个项目并将其存储在状态 React Native答案

【问题标题】：How to select an item from list and store it on the state React Native如何从列表中选择一个项目并将其存储在状态 React Native
【发布时间】：2020-12-25 13:03:53
【问题描述】：

我很难解决这个逻辑，我希望有人能提供帮助。当按下地址 2 时，我想获取该值并用它替换地址 1。如何选择项目并将其存储在状态或用它替换地址 1 ？？？以下是我的代码：

 const [collapse, setCollapse] = useState(false);

 <Collapse
          style={styles.locationContainer}
          isCollapsed={collapse}
          onToggle={(isCollapsed) => setCollapse(isCollapsed)}
        >
          <CollapseHeader>
            <View onPress={() => setCollapse(!collapse)}>
              <Text style={styles.title}>Choose location</Text>
              <View style={styles.friendsContainer}>
                <View style={styles.itemsContainerLocation}>
                  <Text style={styles.subTitle}>Address 1</Text>
                  <Text style={styles.default}>(default)</Text>
                </View>
                {collapse ? (
                  <Ionicons name="ios-arrow-up" size={24} color="black" />
                ) : (
                  <Ionicons name="ios-arrow-down" size={20} color="black" />
                )}
              </View>
            </View>
          </CollapseHeader>
          <CollapseBody>
            <View style={styles.adressesContainer}>
              <TouchableOpacity>
                <Text style={styles.adressesName}>Address 2</Text>
              </TouchableOpacity>
            </View>
            <View style={styles.adressesContainer}>
              <TouchableOpacity>
                <Text style={styles.adressesName}>Address 3</Text>
              </TouchableOpacity>
            </View>
            <View style={styles.adressesContainer}>
              <TouchableOpacity>
                <Text style={styles.adressesName}>Address 4</Text>
              </TouchableOpacity>
            </View>
          </CollapseBody>
        </Collapse>

【问题讨论】：

代码里只有jsx，状态逻辑和handler在哪里？
我不知道如何实现逻辑，你能帮帮我吗？我是新来的反应原生
至少您可以尝试一些东西，如果它不起作用，那么我们可以提供帮助。老实说，如果您自己学习和实现它，这可能非常容易:)
谢谢，我正在尝试，但我认为库完全不支持 onPress

标签： javascript reactjs react-native react-native-flatlist

【解决方案1】：

见react tutorial on state and lifecycle。

类似的东西

const addresses = ['Address1', 'Address2', ...];

const [selectedAddressIndex, setSelectedAddressIndex] = useState(0);

// render selected address
<>
  <Text>{addresses[selectedAddressIndex]}</Text>
</>

// render each selectable address inside a TouchableOpacity
<>
  {
    addresses.map((address, index) => (
      <TouchableOpacity key={index} onPress={() => setSelectedAddressIndex(index)}>
        <Text>{address}</Text>
      <TouchableOpacity/>
    ))
  }
</>

应该适合你。

map 是 js 中一个强大的数组方法，它允许您为数组中的元素构建相同的组件。

TouchableOpacity 中的onPress 是接受回调函数的道具，当触发onPress 事件时，将调用回调函数() => setSelectedAddressIndex(index)。

此外，react-native 推荐了一个新的Pressable 组件，替换了TouchableOpacity。

【讨论】：