React-Bootstrap中实现选中一个表单后禁用另一个的方法

我正在使用React-Bootstrap进行项目开发，现有两个点击后会弹出模态框的表单字段。需求是：当选中其中任意一个表单并完成填写保存（绿色勾选标记会在此时显示）后，禁用另一个表单。相关代码及表单界面如下：

<>
    <div className='add-edit-product'>
        <div className='d-flex align-items-center justify-content-center error-info mb-3'>
            <img src={`../../../assets/img/about/${data.currencyHedge && data.marginFinancing ? "error-info-success.png" : "error-info.png"}`} className='me-3' />
            {data.currencyHedge && data.marginFinancing ?
                <p className='success'>Risks are acceptable due to mitigants</p> :
                <p className='error'>The below risks require your attention</p>
            }
        </div>

        <div className='form'>
            <h2 className='mb-3'>Exchange rate risk</h2>
            
            {data.currencyHedge && data.marginFinancing ? <p>No risk</p> :
                <div>
                    {/*clicking on either of this tab will show a modal*/}
                    <div className='risk-tab' onClick={() => { setcurrencyHedgeModal(true); setSelected("currencyHedge") }}>
                        <h3>Enter a currency hedge</h3>
                        <img src={`../../../assets/img/about/${data.currencyHedge ? "correct-success.png" : "correct (1).png"}`} />
                    </div>
                    <div className='risk-tab' onClick={() => {setfinancingSufficientlyModal(true); setSelected("marginFinancing")}}>
                        <h3>Margin the financing sufficiently</h3>
                        <img src={`../../../assets/img/about/${data.marginFinancing ? "correct-success.png" : "correct (1).png"}`} />
                    </div>
                </div>
            }
        </div>
    </div>
    <div className='footer_'>
        <button onClick={() => hendelCancel()} className="footer_cancel_btn">cancel</button>
        <button onClick={() => { nextStep() }} className='footer_next_btn'> Next</button>
    </div>
    {currencyHedgeModal && <CurrencyHedgeModal show={currencyHedgeModal} onHide={() => setcurrencyHedgeModal(false)} getModalData={(e) => modalGetData(e)} type={selected} />}
    {financingSufficientlyModal && <FinancingSufficientlyModal show={financingSufficientlyModal} onHide={() => setfinancingSufficientlyModal(false)} getModalData={(e) => setData({ ...data, marginFinancing: e })} />}
</>

表单界面：

请问该如何添加此禁用逻辑？

核心逻辑是利用data中已有的currencyHedge和marginFinancing状态字段，判断是否禁用对应表单tab，同时通过样式和交互限制实现完整的禁用效果。

1. 修改表单tab的交互与状态判断 #

对两个risk-tab元素做如下调整：

• 根据对方的完成状态添加禁用样式
• 点击时判断是否处于禁用状态，仅允许未禁用的tab触发模态框

修改后的代码片段：

<div className={`risk-tab ${data.marginFinancing ? 'risk-tab-disabled' : ''}`} 
     onClick={() => {
         // 仅当marginFinancing未完成时允许触发模态框
         if (!data.marginFinancing) {
             setcurrencyHedgeModal(true); 
             setSelected("currencyHedge");
         }
     }}>
    <h3>Enter a currency hedge</h3>
    <img src={`../../../assets/img/about/${data.currencyHedge ? "correct-success.png" : "correct (1).png"}`} />
</div>
<div className={`risk-tab ${data.currencyHedge ? 'risk-tab-disabled' : ''}`} 
     onClick={() => {
         // 仅当currencyHedge未完成时允许触发模态框
         if (!data.currencyHedge) {
             setfinancingSufficientlyModal(true); 
             setSelected("marginFinancing");
         }
     }}>
    <h3>Margin the financing sufficiently</h3>
    <img src={`../../../assets/img/about/${data.marginFinancing ? "correct-success.png" : "correct (1).png"}`} />
</div>

2. 添加禁用样式（推荐） #

在CSS中添加禁用状态的视觉样式，让用户直观感知：

.risk-tab-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    /* 可选：直接通过CSS阻止点击，可省略JS中的判断逻辑 */
    /* pointer-events: none; */
}

3. 验证模态框回调逻辑 #

确保模态框的getModalData回调正确更新data中的状态：

• 对于CurrencyHedgeModal，需保证modalGetData函数正确将data.currencyHedge设置为表示完成的真值
• 对于FinancingSufficientlyModal，当前回调已正确设置data.marginFinancing = e，需确保e为真值

额外说明 #

如果需要支持「取消已完成表单，重新启用另一个」的场景，只需在对应模态框的取消/删除逻辑中，将data里的对应字段重置为false，禁用逻辑会自动恢复。

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