首页 > 解决方案 > 如何在本机反应中禁用数组响应值上的按钮

问题描述

在我的代码中。IdentificationType 是一个包含所有值的数组。现在我必须禁用以下按钮 CustomButton :条件如果强制:true 和 uploadStatus:false。

我尝试了一些东西,但没有得到结果。

disabled={(!this.state.IdentificationType.uploadStatus == false)&&(this.state.IdentificationType.mandatory===true)  }

const {IdentificationType}= this.state;
IdentificationType (3) [{…}, {…}, {…}]
0:
idType: "POID"
name: "Proof Identity"
description: "Upload your identity proof"
mandatory: true
eligibleDocumentList: (3) [{…}, {…}, {…}]
__typename: "IdentificationTypes"
doctype: (3) [{…}, {…}, {…}]
selectValue: "passport"
issueDate: "25/02/2020"
expDate: "25/02/2020"
idNumber: ""
place: ""
image: ""
uploadStatus: false
displayThumbnail: false
fileName: ""
__proto__: Object
1: {idType: "addressProof", name: "Address Proof", description: "Upload your address proof", mandatory: false, eligibleDocumentList: Array(3), …}
2: {idType: "ageProof", name: "Age Proof", description: "Upload your age proof", mandatory: false, eligibleDocumentList: Array(3), …}
length: 3


<View style={{ alignSelf: 'center', paddingTop: 20, position: 'absolute', bottom: 10, zIndex: 10 }}>
                    <CustomButton backgroundColor={parentStyle[appliedTheme] ? parentStyle[appliedTheme][appliedMode].primaryButtonColor : null}
                        width={deviceWidth - 30} label={'Save & Proceed'} height={60} labelFontSize={hp('2.5%')}
                        disabled={true}
                        onPress={() => this.nextStep()} >
                    </CustomButton>
                </View>

标签: javascriptreactjsreact-nativeecmascript-6

解决方案


{/* before return */}
let {IdentificationType} = this.state;
{/* in render method */}
{IdentificationType && IdentificationType.map(function(value){
    <CustomButton disabled={value.mandatory === true && value.uploadStatus === false ? true : false}></CustomButton>
})}

推荐阅读