可折叠的问题，我想只打开一个问题

Question

我有这个可折叠的，我想一次扩展一个问题我的问题是：当我扩展问题时，所有问题都在同一时间进行扩展请帮我解决这个问题

我是反应原生的新手，我试图映射并返回视图，但它不起作用

这是图像：

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>

    );
  }
}

我希望一次扩展一个问题..实际情况是，当我点击时，所有问题都在扩展

Answer 1

你为每个问题设置你的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。