React Native技术问询：点击按钮后如何获取选中的复选框？

嘿，我来帮你搞定React Native里复选框列表获取选中项的问题！下面是一套实用的实现方案，一步步来：

咱们需要用状态来追踪所有被选中的复选框，每个复选框点击时更新这个状态，最后在按钮点击时直接读取状态就能拿到选中项啦。

这里我用函数组件配合useState来实现，假设你用的是社区常用的@react-native-community/checkbox（如果用RN自带的CheckBox也可以，逻辑完全一致）：

import React, { useState } from 'react';
import { View, Text, Button, FlatList, StyleSheet } from 'react-native';
import CheckBox from '@react-native-community/checkbox';

// 示例选项数据，你可以替换成自己的业务数据
const options = [
  { id: '1', label: '选项1' },
  { id: '2', label: '选项2' },
  { id: '3', label: '选项3' },
  { id: '4', label: '选项4' },
];

const CheckboxList = () => {
  // 用数组存储选中项的唯一标识（比如id，也可以存整个对象，看需求）
  const [selectedItems, setSelectedItems] = useState([]);

  // 处理复选框选中/取消的逻辑
  const handleToggle = (itemId) => {
    setSelectedItems(prevSelected => {
      // 判断当前项是否已被选中
      if (prevSelected.includes(itemId)) {
        // 已选中则从数组中移除
        return prevSelected.filter(id => id !== itemId);
      } else {
        // 未选中则添加到数组
        return [...prevSelected, itemId];
      }
    });
  };

  // 点击按钮后获取并处理选中项
  const handleGetSelected = () => {
    // 如果需要拿到完整的选项对象，通过筛选匹配id
    const selectedOptions = options.filter(item => selectedItems.includes(item.id));
    console.log('选中的选项：', selectedOptions);
    // 这里可以把选中项传给父组件、提交接口或者做其他业务处理
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={options}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View style={styles.itemContainer}>
            <CheckBox
              value={selectedItems.includes(item.id)}
              onValueChange={() => handleToggle(item.id)}
            />
            <Text style={styles.label}>{item.label}</Text>
          </View>
        )}
      />
      <Button title="获取选中项" onPress={handleGetSelected} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    marginTop: 40,
  },
  itemContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 15,
  },
  label: {
    marginLeft: 10,
    fontSize: 16,
  },
});

export default CheckboxList;

• 状态管理：用selectedItems数组存储选中项的唯一标识（比如id），比存储整个对象更高效，还能避免引用类型带来的状态更新问题。
• 切换逻辑：handleToggle函数通过判断当前项是否在选中数组里，决定添加或移除，保证状态更新的正确性。
• 获取选中项：点击按钮时，通过options.filter把选中id对应的完整对象筛选出来，方便后续业务处理。
• 自定义复选框适配：如果你的复选框是自定义组件，只需要把onValueChange和value属性对应到组件的回调和状态上，逻辑完全通用。

内容的提问来源于stack exchange，提问作者Jacob de Oliveira