Как отключить кнопку после значения фильтра массива в реагировать родной

Question

Здесь, в моем коде. IdentificationType - это массив, в котором присутствует все значение. Теперь я должен отключить приведенную ниже кнопку CustomButton: условие, если обязательное: true и uploadStatus: false.

Я попробовал некоторый код, но он не работает. В основном я должен отключить кнопку Сохранить и продолжить, если условие ложно. В массиве IdentificationType я получаю значение. Я должен l oop и найти значение, если (обязательно === 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>

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>

Answer 2

Вы можете отобразить свой массив IdentificationType и отобразить его как:

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

Надеюсь, это работает для вас.