如何使我的手风琴项目一次打开1？

Question

我试图在不使用任何模块的情况下列出手风琴列表，但此时此刻我陷入了困境。我的展开状态一开始是错误的。在onPress中，我将expanded设为true，如果[expanded]为true，则这段代码使视图可见。我用过这个{this.state.expanded &&。我有一个以上的项目，但是当我单击其中的一个时，所有的项目都会打开。我该如何解决？

accordion guide

Answer 1

您需要为每个手风琴创建一个唯一的扩展状态。

以下是示例：

export default class FAQs extends Component {
    constructor(props) {
        super(props);
        this.state = {
            expanded: false,
            menu: [
                {
                    title: 'Non Veg Biryanis',
                    data: 'some data',
                },
                {
                    title: 'Pizzas',
                    data: 'soem data'
                },
            ]
        }
    }
    toggleExpand = () => {
        this.setState({ expanded: !this.state.expanded })
    }
    render() {
        return (
            <View style={container}>
                <FlatList
                    data={this.state.menu}
                    renderItem={({ item }) =>
                        <View style={card}>
                            <TouchableOpacity onPress={() => this.toggleExpand()}>
                                <View style={this.state.expanded ? cardHeaderBoxExpanded : cardHeaderBoxNotExpanded}>
                                    <View style={headerBox}>
                                        <Text style={cardHeader}>{item.title}</Text>
                                    </View>
                                </View>
                            </TouchableOpacity>
                            {this.state.expanded &&
                                <View style={cardTextBox}>
                                    <Text style={cardText}>
                                        {item.data}
                                    </Text>
                                </View>
                            }
                        </View>
                    }
                    keyExtractor={item => item.title}
                />
            </View>
        )
    }
}