React中点击按钮后禁用所有按钮的解决方案求助

问题根源 #

<div>元素不支持原生disabled属性，这个属性仅对表单控件（如<button>、<input>等）生效，所以你给div加disabled不会产生任何禁用效果。

方案一：用<button>替换<div>（推荐，语义化+原生支持） #

直接将包裹按钮的<div>换成<button>，这样就能利用原生disabled属性实现禁用，同时保留原有样式：

1. 调整JSX代码：

<div>
    <div className={`${messageStyle.divStyle}`}>
        <button className={`${messageStyle.actionButton}`} onClick={this.handleViewButtonClick} disabled={this.state.isLoading}>
            <ViewButton/>
        </button>
        <button 
            className={!this.state.vClick ? `${messageStyle.actionButton}` : `${messageStyle.disableActionButton}`}
            disabled={this.state.isLoading || this.state.disableEditButton} 
            onClick={this.handleEditButtonClick}
        >
            <EditButton/>
        </button>
        <button 
            className={this.state.DeleteButtonClick ? `${messageStyle.disableActionButton}` : `${messageStyle.actionButton}`}
            disabled={this.state.isLoading || this.state.disableDeleteButton} 
            onClick={this.handleDeleteButtonClick}
        >
            <DeleteButton/>
        </button>
    </div>
</div>

2. 重置button默认样式（避免浏览器自带样式干扰）：
   在你的样式文件中添加：

.actionButton {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    /* 保留你原有actionButton的其他样式 */
}
.disableActionButton {
    cursor: not-allowed;
    /* 保留你原有禁用样式 */
}

3. 管理loading状态：
   在组件state中添加isLoading，并在API调用前后更新状态：

// 初始化state
this.state = {
    // 你的其他状态
    isLoading: false
};

// 修改handleEditButtonClick示例
handleEditButtonClick = async () => {
    this.setState({ isLoading: true });
    try {
        // 执行你的API调用
        await yourEditApiCall();
        // 处理成功逻辑
    } catch (err) {
        // 处理错误逻辑
    } finally {
        this.setState({ isLoading: false });
    }
};

// handleDeleteButtonClick同理修改

方案二：用状态控制div的点击事件与样式（不修改元素类型） #

如果不想替换div元素，通过状态控制onClick是否触发，同时切换禁用样式：

1. 同样添加isLoading状态（同方案一）。

2. 修改JSX中的按钮div：

<div>
    <div className={`${messageStyle.divStyle}`}>
        <div 
            className={this.state.isLoading ? `${messageStyle.disableActionButton}` : `${messageStyle.actionButton}`}
            onClick={this.state.isLoading ? null : this.handleViewButtonClick}
        >
            <ViewButton/>
        </div>
        <div 
            className={this.state.isLoading || !this.state.vClick ? `${messageStyle.disableActionButton}` : `${messageStyle.actionButton}`}
            onClick={this.state.isLoading ? null : this.handleEditButtonClick}
        >
            <EditButton/>
        </div>
        <div 
            className={this.state.isLoading || this.state.DeleteButtonClick ? `${messageStyle.disableActionButton}` : `${messageStyle.actionButton}`}
            onClick={this.state.isLoading ? null : this.handleDeleteButtonClick}
        >
            <DeleteButton/>
        </div>
    </div>
</div>

3. 确保禁用样式中添加cursor: not-allowed，让用户直观感知按钮不可点击。

关键说明 #

• 两种方案核心都是通过isLoading状态控制按钮的可点击性与样式，区别在于是否使用原生表单控件。
• 优先选择方案一，因为<button>更符合语义化，原生disabled会阻止点击事件触发，无需手动处理onClick的条件判断。

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