英文:
How can I make my accordion items opens 1 at a time?
问题
我试图制作一个手风琴列表，但不使用任何模块，但我在这一点上卡住了。我有一个初始为false的扩展状态。在onPress中，我将其设置为true，{this.state.expanded && 这段代码会在expanded为true时使视图可见。我使用了这个手风琴指南。我有多个项目，但当我点击其中一个时，所有项目都会打开。我该如何解决这个问题？
export default class FAQs extends Component {
constructor(props) {
super(props);
this.state = {
expanded: false,
menu: [
{
title: 'Non Veg Biryanis',
data: '一些数据',
},
{
title: 'Pizzas',
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>
)
}
}
英文:
I'm trying to make accordion list without using any modules but I got stuck at this point. I have a expanded state which is false at the start. In onPress I'm making expanded true and {this.state.expanded && this piece of code makes view visible if expanded is true. I have used this accordion guide. I have more than 1 item but when I click one of them all of them opens. How do i solve this?
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>
)
}
}
答案1
得分: 1
需要为每个手风琴创建一个唯一的扩展状态。
以下是一个示例：
export default class FAQs extends React.PureComponent {
static MENU = [
{
title: '非素食Biryanis',
data: '一些数据',
},
{
title: '披萨',
data: '一些数据',
},
]
constructor (props) {
super(props);
this.state = {
menu: FAQs.MENU,
expandedList: FAQs.MENU.map(() => ({ expanded: false })),
refresh: false,
};
}
toggleExpand = (i) => {
this.state.expandedList[i].expanded = !this.state.expandedList[i].expanded;
this.setState({
refresh: !this.state.refresh,
});
}
render () {
return (
<View style={container}>
<FlatList
data={this.state.menu}
extraData={this.state.refresh}
renderItem={({ item, index }) =>
<View style={card}>
<TouchableOpacity onPress={() => this.toggleExpand(index)}>
<View style={this.state.expanded ? cardHeaderBoxExpanded : cardHeaderBoxNotExpanded}>
<View style={headerBox}>
<Text style={cardHeader}>{item.title}</Text>
</View>
</View>
</TouchableOpacity>
{this.state.expandedList[index].expanded &&
<View style={cardTextBox}>
<Text style={cardText}>
{item.data}
</Text>
</View>
}
</View>
}
keyExtractor={item => item.title}
/>
</View>
);
}
}
注意：我已将标题和数据的文本内容翻译为中文。如果需要其他帮助，请告诉我。
英文:
You need to create a unique expanded state for each of your accordions.
Here is an expample below :
export default class FAQs extends React.PureComponent {
static MENU = [
{
title: 'Non Veg Biryanis',
data: 'some data',
},
{
title: 'Pizzas',
data: 'soem data',
},
]
constructor (props) {
super(props);
this.state = {
menu: FAQs.MENU,
expandedList: FAQs.MENU.map(() => ({ expanded: false })),
refresh: false,
};
}
toggleExpand = (i) => {
this.state.expandedList[i].expanded = !this.state.expandedList[i].expanded;
this.setState({
refresh: !this.state.refresh,
});
}
render () {
return (
<View style={container}>
<FlatList
data={this.state.menu}
extraData={this.state.refresh}
renderItem={({ item, index }) =>
<View style={card}>
<TouchableOpacity onPress={() => this.toggleExpand(index)}>
<View style={this.state.expanded ? cardHeaderBoxExpanded : cardHeaderBoxNotExpanded}>
<View style={headerBox}>
<Text style={cardHeader}>{item.title}</Text>
</View>
</View>
</TouchableOpacity>
{this.state.expandedList[index].expanded &&
<View style={cardTextBox}>
<Text style={cardText}>
{item.data}
</Text>
</View>
}
</View>
}
keyExtractor={item => item.title}
/>
</View>
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论