单击新的 Collapsible 后关闭其他打开的 Collapsible答案

【问题标题】：after clicking new Collapsible closed other Collapsible which is open单击新的 Collapsible 后关闭其他打开的 Collapsible
【发布时间】：2019-05-21 09:25:16
【问题描述】：

// 在我的代码中，这里有三个 Collapsible，单击一个后它会展开，但要再次关闭它，我必须单击该特定文本。我想进行更改：如果三个 Collapsibles 中的任何一个已经打开，并且我点击了新按钮，那么现有的 Collapsibles 应该会自动关闭。

 {isSimUAllowed && <View style={styles.paymentMethod}>
                  <TouchableOpacity onPress={() => {
                    this.setState({ simUpgrade: !this.state.simUpgrade });
                  }}>
                    <RegularText text="SIM Upgrade" textColor={this.state.simUpgrade?'#006288':'black'} style={{fontWeight:this.state.simUpgrade?'bold':'normal'}}/>
                  </TouchableOpacity>
                  <Collapsible collapsed={!this.state.simUpgrade}>
                    <Button
                      block
                      primary
                      onPress={() => this.loadScreen('CustomerVerification', 'swap',1)}
                      style={{ marginTop: 10 }}
                    >
                      <Text>Proceed</Text>
                    </Button>
                  </Collapsible>
                </View>}
                {isSimCAllowed && <View style={styles.paymentMethod}>
                  <TouchableOpacity onPress={() => {
                    this.setState({ lostSim: !this.state.lostSim });
                  }}>
                     <RegularText text="SIM Change" textColor={this.state.lostSim?'#006288':'black'} style={{fontWeight:this.state.lostSim?'bold':'normal'}}/>
                  </TouchableOpacity>
                  <Collapsible collapsed={!this.state.lostSim}>
                    <Button
                      block
                      primary
                      onPress={() => this.loadScreen('CustomerVerification', 'lost',1)}
                      style={{ marginTop: 10 }}
                    >
                      <Text>Proceed</Text>
                    </Button>
                  </Collapsible>
                </View>}
                {isSimEAllowed && <View style={styles.paymentMethod}>
                  <TouchableOpacity onPress={() => {
                    this.setState({ validator: !this.state.validator });
                  }}>
                   <RegularText text="E-validator" textColor={this.state.validator?'#006288':'black'} style={{fontWeight:this.state.validator?'bold':'normal'}}/>
                  </TouchableOpacity>
                  <Collapsible collapsed={!this.state.validator}>
                    <Button
                      block
                      primary
                      onPress={() => this.loadScreen('CustomerVerification', 'validate',0)}
                      style={{ marginTop: 10 }}
                    >
                      <Text>Proceed</Text>
                    </Button>
                  </Collapsible>
                </View>}

谢谢

【问题讨论】：

标签： javascript reactjs react-native ecmascript-6 react-redux

【解决方案1】：

来自react-native-collapsible 的Accordion 组件负责处理这个特定的用例。

【讨论】：