如何实现三个输入字段未填满时禁用Upload Button功能？

要实现三个Autocomplete字段都选择完成后启用对应行的上传按钮，核心是基于每一行的字段状态动态控制DropzoneArea的禁用状态，具体步骤如下：

1. 确认状态更新逻辑 #

先确保你的handleParties和handleRelation函数正确更新了relatedPartyDetails数组中对应行的buyer、shipper、party_relation字段值——这是后续判断的基础。

2. 给DropzoneArea添加禁用判断 #

在DropzoneArea组件中添加disabled属性，通过当前行的party对象判断三个字段是否都已填写：

• 当party.buyer、party.shipper、party.party_relation都存在有效值时，禁用状态为false（启用上传）
• 任意一个字段未填写时，禁用状态为true（禁用上传）

修改后的代码片段（重点部分标注） #

{relation && <Col lg={2}>
    <div className='drag-and-drop'>
        <DropzoneArea
            Icon="none"
            filesLimit={1}
            showPreviews={true}
            defaultValue={relatedPartyDetails.upload_evidence}
            showPreviewsInDropzone={false}
            useChipsForPreview
            previewGridProps={{ container: { spacing: 1, } }}
            dropzoneText='Upload Evidence'
            previewText=""
            onChange={(file) => handleChangeFile(file[0], index)}
            // 新增禁用判断逻辑
            disabled={!(party.buyer && party.shipper && party.party_relation)}
        />
    </div>
    {error && error?.upload_evidence && <span style={{ color: 'red' }}>{error.upload_evidence}</span>}
</Col>}

额外说明 #

• 如果你的字段值有特殊空值场景（比如空字符串、无效枚举值），可以调整disabled的判断条件，例如!(party.buyer?.trim() && party.shipper?.trim() && party.party_relation)
• 若初始加载时relatedPartyDetails已有完整数据，上传按钮会自动启用，无需额外处理

内容的提问来源于stack exchange，提问作者Bruno