React Native中Map函数生成按钮的多选功能实现求助

要实现多选按钮并生成对应组件，核心是把单个选中索引的状态改成存储多个选中索引的数组，以下是修改后的完整逻辑：

1. 修改状态定义与点击事件处理 #

把原来的selectedButtonIndex换成数组selectedIndices，点击按钮时切换该索引的选中状态：

// 初始化空数组存储选中的按钮索引
const [selectedIndices, setSelectedIndices] = useState([]);

const handlePress = (index) => {
  setSelectedIndices(prev => {
    // 如果已选中，就移除该索引；否则添加
    if (prev.includes(index)) {
      return prev.filter(i => i !== index);
    } else {
      return [...prev, index];
    }
  });
};

const buttonLabels = [
  'Homeowner',
  'In-depth',
  'Inherited',
  'Probate',
  'Lost income',
  'Relocation',
  'Divorce',
  'Downsizing'
];

2. 更新按钮列表的样式判断 #

判断当前按钮索引是否在选中数组里，来切换背景色和文字颜色：

<View style={styles.buttonGrid}>
  {buttonLabels.map((label, index) => (
    <TouchableOpacity
      key={index}
      style={[
        styles.button,
        { backgroundColor: selectedIndices.includes(index) ? '#346284' : '#FFFFFF' },
      ]}
      onPress={() => handlePress(index)}
    >
      <Text style={{ color: selectedIndices.includes(index) ? '#FFFFFF' : '#888889' }}>
        {label}
      </Text>
    </TouchableOpacity>
  ))}
</View>

3. 生成多个选中对应的组件 #

遍历selectedIndices数组，为每个选中项生成标题和输入框，同时支持单独删除某一项：

<ScrollView style={{flexGrow:2}}>
  {selectedIndices.map(index => (
    <View key={index} style={styles.headingContainer}>
      <View style={styles.heading}>
        <Text style={styles.headingText}>{buttonLabels[index]}</Text>
        <TouchableOpacity onPress={() => {
          // 移除当前索引
          setSelectedIndices(prev => prev.filter(i => i !== index));
        }}>
          <Image source={require('../assets/Icons/close.png')} style={styles.closeIcon} />
        </TouchableOpacity>
      </View>
      <TextInput style={styles.textInput} placeholder="Enter Text Here" />
    </View>
  ))}
</ScrollView>

关键逻辑说明 #

• 用数组存储选中索引，支持同时选中多个按钮
• 点击按钮时通过includes判断状态，实现选中/取消的切换
• 遍历选中数组生成对应组件，每个组件的删除按钮仅移除自身对应的索引

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