1

I have a isFetching state in redux store , while fetching the data from backend , isFetching becomes true , so when isFetching flag is true, I want to disable all click events without jQuery.

I found a few answers (with jQuery and CSS) but they are related to a specific element in the DOM.

I want to disable all the click events.

Roamer-1888
  • 19,138
  • 5
  • 33
  • 44
sravan ganji
  • 4,774
  • 3
  • 25
  • 37

2 Answers2

1

Based on the value of isFetching you can disable the button that is submitting the form (<button disabled> or <input disabled>, and also check it in the submit handler whether to submit or not, in case submit is executed because of hitting in an input field.

Yossi
  • 5,577
  • 7
  • 41
  • 76
  • If I do that I have to check the condition on every element , that’s what I mentioned in the question , it is possible to disable on each element but what if I have like 30 elements , I can’t check this on every element , that’s why I am looking for a solution to disable click event rather than disabling the button or any other element – sravan ganji Mar 24 '18 at 04:46
  • Then you can display a message like 'fetching data' instead of displaying the form... – Yossi Mar 24 '18 at 04:49
1

I thought of a way. Maybe you can try to achieve it like this:

When isFetch is true, use a global element (DIV) mask, set the width and height to 100%, and then set the background color to be transparent, set the z-index to be greater than the element in the current interface, otherwise, the z-index is smaller than the element in the current interface. Then listen to the click event of this element. In this way, click events on the interface can be blocked. When isFetching is false, make the mask disappear.

In your React component,

handleClick = (e) => {
  e.preventDefault();
  e.stopPropagation();
}

.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 1000;
}

.mask.disappear {
  display: none;
}

<div>
    your element    
</div>

<div className={`mask ${isFetching ? '' : 'disappear'}`} onClick= 
{this.handleClick}></div>
Michael An
  • 181
  • 9
  • I think this is a very good idea, and should be the accepted answer. The best part is you don't need to wrap every component accepting user input, but you can for example `decorate` App with a component with the mask, and forget about it... – MarcoS Jul 13 '21 at 19:28
  • I also agree with your idea, just use the mask to focus click event – Michael An Aug 30 '21 at 09:41