- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在这里显示三个按钮发票、充值和付款。默认情况下,当我来到这个页面时,“发票”按钮被选中,其余两个按钮被禁用。但是,如果我通过许可隐藏此“发票”按钮,它应该会自动切换到“充值”选项卡并且充值应该处于事件状态。请建议。
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>
);
}
}
最佳答案
好吧,如果你根据 Prop 设置 activeTab 状态,你可以在构造函数中检查你是否有 permission.invoiceTab
然后将 activeTab 设置为 invoices else to 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>
);
}
}
关于javascript - 根据许可更改按钮状态 react native ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56697844/
我正在设计一款支持签到的应用。 使用应用程序时的 GPS 权限是必须。但是有一个使用地理围栏自动 checkin 的可选功能,它需要“始终”gps 权限。 我想首先请求常规的“使用时”权限。然后,仅当
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 8 年前。 Improve
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 想改进这个问题?将问题更新为 on-topic对于堆栈溢出。 6年前关闭。 Improve this qu
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 7 年前。 Improve
最近,我研究了使用 OnGuard 来帮助诚实的人遵守他们的原则。我同意这里许多人表达的观点,即任何许可制度都无法保护您免受那些想要使用您的软件但不想付费的人的侵害。另一方面,我希望避免让其他人太容易
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。 想改善这个问题吗?更新问题,以便将其作为on-topic
我试图在计算机上设置Windows Developer许可证,但失败。 我正在运行Visual Studio 2012。 当我单击“项目”->“商店”->“获取开发者许可证”时,它向我显示一个信息对话
已关闭。这个问题是 off-topic 。目前不接受答案。 想要改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 已关闭11 年前。 Improve th
我想购买 Delphi Xe2 Pro。我独自一人使用它,我有 2 台电脑:一台在办公室,一台可移植用于“在路上”工作。Delphi Xe2 许可证不是很清楚,因此有什么办法可以为 2 台 PC 只购
我正在我的应用程序中安装 Android Licensing,我想知道什么是检查许可证的良好形式 - 每次或仅一次并保存它已被许可共享偏好的事实?我担心的是,如果用户处于离线状态,他们将被锁定在应用程
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 7 年前。
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 7 年前。
有人知道 WinRT 应用程序的许可是如何工作的吗? 我已向 Microsoft 申请了免费的开发人员许可证,这似乎与 temporarykey.pfx 或 appxmanifest 文件相关联。问题
我一直在网上搜索如何接受 Xcode,以便使用 Xcode 为 MAC 重新编译 MATLAB Windows 文件,但我没有找到任何相关的答案。 我在 MATLAB 中得到的错误消息是: Xcode
一些工作推到 QA,一些工作推到生产。 应该只允许开发人员推送到 QA,并且只允许 QA 推送到生产。除了制作两个单独的构建服务器(通过某种方式共享工件)之外,我如何限制权限? 最佳答案 您需要基于项
已关闭。这个问题是 off-topic 。目前不接受答案。 想要改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 已关闭10 年前。 Improve th
在 MacOS Catalina 上升级到 Xcode 11.1 后,运行一些命令(例如 git status)会导致 Xcode 声明必须同意许可。显然,我们可以运行 git status 和 gr
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题? Update the question所以它是on-topic对于堆栈溢出。 9年前关闭。 Improve this que
在 MacOS Catalina 上升级到 Xcode 11.1 后,运行一些命令(例如 git status)会导致 Xcode 声明必须同意许可。显然,我们可以运行 git status 和 gr
我正在构建一个小型 winforms 应用程序:ayende rhino licensing .许可工作正常,我可以创建许可并按我的选择分发它们。 问题是,如何让每个许可证只在一台机器上工作?我知道在
我是一名优秀的程序员,十分优秀!