根据权限更改按钮状态反应本机

Question

这里我显示三个按钮发票、充值和付款。 默认情况下，当我进入此页面时，选择“发票”按钮处于活动状态，其余两个按钮处于禁用状态。但是，如果我通过许可隐藏此“发票”按钮，它应该会自动切换到“充值”选项卡，并且充值应该处于活动状态。 请建议。

export default class Financial extends Component {
    constructor(props){
        super(props)
        this.state ={
            activeTab: 'invoices'
        }
    }

  render(){
    const { activeTab } = this.state;
    const { customer,rechargeDeatails,navigation,permission } = this.props;
    console.log("permission-------",permission);
    return (
        <View
          style={{
            flex: 1,
            paddingLeft: 10,
            paddingRight: 10,
            backgroundColor: '#f1f1f1',
            flexDirection: 'column'
          }}
        >
          <View style={{flexDirection:'row', padding: 10}}>
          {permission.invoiceTab &&
              <View style={{marginRight: 5}}>
                <TouchableOpacity onPress={()=>this.setState({activeTab:'invoices'})}>
                    <Button small rounded disabled={activeTab!=='invoices'} style={{padding:2, height: 28}}>
                      <Text style={styles.btnLabel}> Invoices </Text>
                    </Button>
                </TouchableOpacity>
              </View>}
              <View style={{marginRight: 5}}>
                <TouchableOpacity onPress={()=>this.setState({activeTab:'recharges'})}>
                    <Button small rounded disabled={activeTab!=='recharges'} style={{padding:2, height: 28}}>
                      <Text style={styles.btnLabel}> Recharges </Text>
                    </Button>
                </TouchableOpacity>
              </View>
              <View style={{marginRight: 5}}>
                <TouchableOpacity onPress={()=>this.setState({activeTab:'payments'})}>
                    <Button small rounded disabled={activeTab!=='payments'} style={{padding:2, height: 28}}>
                      <Text style={styles.btnLabel}> Payments </Text>
                    </Button>
                </TouchableOpacity>
              </View>
             </View>
          <View style={{flexDirection:'column'}}>
            { activeTab=='recharges' && <Recharges customer={customer} rechargeDeatails={rechargeDeatails}/>}
            { activeTab=='invoices' && <Invoices navigation={navigation}/>}
            { activeTab=='payments' && <Payments/>}
          </View>
        </View>
      );
  }
}

Answer 1

好吧，如果你基于 props 设置 activeTab 状态，你可以在构造函数中检查，如果你有 permission.invoiceTab 然后将 activeTab 设置为发票，否则设置为 recharges

喜欢：

export default class Financial extends Component {
  constructor(props) {
    super(props)
    const { permission } = this.props
    let activeTab = 'invoices'
    if (permission.invoiceTab) {
      activeTab = 'invoices'
    } else if (permission.rechargeTab) {
      activeTab = 'recharges'
    } else {
      activeTab = 'payments'
    }
    this.state = {
      activeTab,
    }
  }

  render() {
    const { activeTab } = this.state;
    const { customer, rechargeDeatails, navigation, permission } = this.props;
    console.log("permission-------", permission);
    return (
      <View
        style={{
          flex: 1,
          paddingLeft: 10,
          paddingRight: 10,
          backgroundColor: '#f1f1f1',
          flexDirection: 'column'
        }}
      >
        <View style={{ flexDirection: 'row', padding: 10 }}>
          {permission.invoiceTab &&
            <View style={{ marginRight: 5 }}>
              <TouchableOpacity onPress={() => this.setState({ activeTab: 'invoices' })}>
                <Button small rounded disabled={activeTab !== 'invoices'} style={{ padding: 2, height: 28 }}>
                  <Text style={styles.btnLabel}> Invoices </Text>
                </Button>
              </TouchableOpacity>
            </View>}
          <View style={{ marginRight: 5 }}>
            <TouchableOpacity onPress={() => this.setState({ activeTab: 'recharges' })}>
              <Button small rounded disabled={activeTab !== 'recharges'} style={{ padding: 2, height: 28 }}>
                <Text style={styles.btnLabel}> Recharges </Text>
              </Button>
            </TouchableOpacity>
          </View>
          <View style={{ marginRight: 5 }}>
            <TouchableOpacity onPress={() => this.setState({ activeTab: 'payments' })}>
              <Button small rounded disabled={activeTab !== 'payments'} style={{ padding: 2, height: 28 }}>
                <Text style={styles.btnLabel}> Payments </Text>
              </Button>
            </TouchableOpacity>
          </View>
        </View>
        <View style={{ flexDirection: 'column' }}>
          {activeTab == 'recharges' && <Recharges customer={customer} rechargeDeatails={rechargeDeatails} />}
          {activeTab == 'invoices' && <Invoices navigation={navigation} />}
          {activeTab == 'payments' && <Payments />}
        </View>
      </View>
    );
  }
}