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

【问题标题】：How to disabled button after array filter response value in react native如何在本机反应中的数组过滤器响应值后禁用按钮
【发布时间】：2020-06-09 23:13:32
【问题描述】：

在我的代码中。 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>

【问题讨论】：

标签： javascript reactjs react-native ecmascript-6

【解决方案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>

【讨论】：

【解决方案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>

希望这对你有用。

【讨论】：