具有多项选择的 ButtonGroup答案

【问题标题】：ButtonGroup with mutliplechoices具有多项选择的 ButtonGroup
【发布时间】：2020-04-08 07:50:29
【问题描述】：

我是 react-hooks 和 react-native 以及 react-native elements 的新手。我在这里尝试的是能够一次选择多个按钮，但我一次只能选择一个。我不确定我做错了什么，因为我正在按照以下说明进行操作： https://reactnativeelements.com/docs/button_group/

这是我当前的代码：

import React, { useState } from 'react';
import {View, StyleSheet} from 'react-native';
import {ButtonGroup} from 'react-native-elements';

const WeekdaySelector = React.memo(props => {
const buttons = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const [selectedIndexes, setSelectedIndexes] = useState([]);

return(
    <View style={styles.viewContainer}>
        <ButtonGroup
        onPress={index =>
            setSelectedIndexes(prevState => [...prevState, parseInt(index)])
        }
        buttons={buttons}
        selectMultiple={true}
        selectedIndexes={selectedIndexes}
        />
    </View>
);

});

const styles = StyleSheet.create({
viewContainer: {
    justifyContent: 'center',
    alignItems: 'center'
}
});

export default WeekdaySelector

【问题讨论】：

标签： react-native react-hooks react-native-elements

【解决方案1】：

您不需要保存和更改以前的值。已经接管的index 值在数组中。

return(
    <View style={styles.viewContainer}>
        <ButtonGroup
        onPress={index =>
            setSelectedIndexes(index)
        }
        buttons={buttons}
        selectMultiple={true}
        selectedIndexes={selectedIndexes}
        />
    </View>
);

【讨论】：

【解决方案2】：

使用selectMultiple 属性为真

<ButtonGroup
        buttons={['Multiple', 'Select', 'Button', 'Group']}
        selectMultiple
        selectedIndexes={selectedIndexes}
        onPress={(value) => {
          setSelectedIndexes(value);
        }}
        containerStyle={{ marginBottom: 20 }}
      />

【讨论】：