javascript - 如何在本机反应中的数组过滤器响应值后禁用按钮

Question

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

我尝试了一些代码，但它不起作用。基本上，如果条件为假，我必须禁用我的保存和继续按钮。在 IdentificationType 数组中我得到了价值。我必须循环并找到值 if (mandatory === true && value.uploadStatus === false) 然后按钮应该被禁用否则启用

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={this.isButtonDisabled()=== undefined?true:this.isButtonDisabled()}
                        disabled={this.state.IdentificationType.filter(value => {
                            value.mandatory === true && value.uploadStatus === false?true:false      

                        })}
                        onPress={() => this.nextStep()}>
                    </CustomButton>
                </View>

标签： javascriptreactjsreact-nativeecmascript-6

Answer 1

this.state={
  isButtonDisabled: true

isButtonDisabled() {
        const { identityData } = this.props;
        const mandatoryDocumentsUploaded = _.filter(identityData, function (value) {
            return value['mandatory'] === true;
        });
        const mandatoryDocuments = _.filter(identityData, function (value) {
            return ((value['mandatory'] === true)
                && (value['image'] !== '')
                && (value['uploadStatus'] === true)
                && (value['displayThumbnail'] === true));
        });

        if (mandatoryDocumentsUploaded.length === mandatoryDocuments.length) {
            this.setState({
                isButtonDisabled: false
            })
        } else {
            this.setState({
                isButtonDisabled: true
            })
        }
    }
 <CustomButton
      disabled={isButtonDisabled}  </CustomButton>