Disable all buttons on click of a button in react js-CodePudding

I have MessageModal.js which opens a react component(modal) on top of home page. It has three buttons, View,Edit & delete. The last two buttons makes an API call.

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

When user clicks on any one button, I load a spinner & make the entire modal (div Container) shown as disabled but the action buttons are still shown enabled. I need to show the buttons as disabled till the time response comes back from that api calls.

I have added disabled attribute on div as shown in above code but it doesn't work.

Please suggest a solution, thanks in advance.

CodePudding user response：

kathuria,

You need to add the disabled attribute to your button not the div.

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

So if you change it like that it should work immediately.

Have a nice day!

CodePudding user response：

You can also prevent events on the whole div and its children by CSS property pointer-event: none

<div>
    <div className={`${messageStyle.divStyle}`} style={{ pointerEvent: this.state.disableDeleteButton ? 'none' : 'auto'}}>
        <div className={`${messageStyle.actionButton}`} onClick={this.handleViewButtonClick}><ViewButton/></div>
         <div className={!this.state.vClick ? `${messageStyle.actionButton}` : `${messageStyle.disableActionButton}`}
                           onClick={this.handleEditButtonClick}>
               <EditButton/>
         </div>
         <div className={this.state.DeleteButtonClick ? `${messageStyle.disableActionButton}` : `${messageStyle.actionButton}`}
                            onClick={this.handleDeleteButtonClick}>
               <DeleteButton/>
        </div>
     </div>
</div>