可折叠的问题,我只想一次打开一个问题
collapsible problem, i want to open only one question at time
我有这个可折叠的,我想一次展开一个问题
我的问题是:当我扩展问题时,所有问题都会同时扩展
请帮我解决这个问题
我是 reacte native 的新手,我尝试映射和 return 视图,但它不起作用
这是图片:
enter image description here
export default class AccordionHeaderContentStyleExample extends Component {
state = {
outerCollapse: true,
innerCollapse: true,
};
render() {
return (
<View style={styles.container}>
<Button
title={this.props.data.name}
onPress={() =>
this.setState({ outerCollapse: !this.state.outerCollapse })}
/>
<Collapsible collapsed={this.state.outerCollapse}>
{questions.map(e=>
<View>
<Button
title={e.name}
color="#42f4eb"
onPress={() => this.setState({ innerCollapse: !this.state.innerCollapse })}/>
<Collapsible collapsed={this.state.innerCollapse}>
<Text style={styles.center}>Reponse</Text>
</Collapsible>
</View>
)}
</Collapsible>
</View>
);
}
}
我希望一次展开一个问题..实际情况是我点击的时候所有问题都在展开
您正在为每个问题设置相同的 innerCollapse
。我建议为该值使用 id 而不是布尔值。
// function outside of render
toggleQuestion = (id) =< {
this.setState((prevState) =< {
const isOpen = prevState.innerCollapse === id;
return ({ innerCollapse: isOpen ? null : id });
})
}
// Button associated with each question
onPress={() => this.toggleQuestion(question.id)}
// inner Collapsible
collapsed={this.state.innerCollapse !== question.id}
如果点击的问题已经打开,这将关闭它,否则这会将 innerCollapse
设置为点击的问题的 ID。
我有这个可折叠的,我想一次展开一个问题 我的问题是:当我扩展问题时,所有问题都会同时扩展 请帮我解决这个问题
我是 reacte native 的新手,我尝试映射和 return 视图,但它不起作用
这是图片:
enter image description here
export default class AccordionHeaderContentStyleExample extends Component {
state = {
outerCollapse: true,
innerCollapse: true,
};
render() {
return (
<View style={styles.container}>
<Button
title={this.props.data.name}
onPress={() =>
this.setState({ outerCollapse: !this.state.outerCollapse })}
/>
<Collapsible collapsed={this.state.outerCollapse}>
{questions.map(e=>
<View>
<Button
title={e.name}
color="#42f4eb"
onPress={() => this.setState({ innerCollapse: !this.state.innerCollapse })}/>
<Collapsible collapsed={this.state.innerCollapse}>
<Text style={styles.center}>Reponse</Text>
</Collapsible>
</View>
)}
</Collapsible>
</View>
);
}
}
我希望一次展开一个问题..实际情况是我点击的时候所有问题都在展开
您正在为每个问题设置相同的 innerCollapse
。我建议为该值使用 id 而不是布尔值。
// function outside of render
toggleQuestion = (id) =< {
this.setState((prevState) =< {
const isOpen = prevState.innerCollapse === id;
return ({ innerCollapse: isOpen ? null : id });
})
}
// Button associated with each question
onPress={() => this.toggleQuestion(question.id)}
// inner Collapsible
collapsed={this.state.innerCollapse !== question.id}
如果点击的问题已经打开,这将关闭它,否则这会将 innerCollapse
设置为点击的问题的 ID。