Question

//在我的代码中，这里有三个可折叠对象，单击其中一个将展开，但是要再次关闭它，我必须单击该特定文本。我要进行更改：如果三个可折叠对象中的任何一个已经打开，然后单击新按钮，则现有的可折叠对象应自动关闭。

 {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>}

谢谢

Answer 1

您可以将一个公共属性用于状态，而不是三个不同的属性，在您的情况下，单个属性可以具有不同的值，即可以具有“ simUpgrade”，“ lostSim”和“ validator”，即

this.state = {
    active : 'simUpgrade' 
  }

并且在代码中，您可以像这样使用它

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

一个可折叠装置应一次打开

1 个答案: