How to disable click event while fetching the data in reactjs witout jquery?

Question

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.

Possible duplicate of How to conditionally add attributes to React components? — jmargolisvt
– jmargolisvt, Commented Mar 24, 2018 at 1:49
I think , it’s not duplicate , question is about disabling the click event — sravan ganji
– sravan ganji, Commented Mar 24, 2018 at 1:54
Post the code you're working with so we can see what isn't working for you. — jmargolisvt
– jmargolisvt, Commented Mar 24, 2018 at 1:58
I am not understanding how to do it in react ? That is the solution am looking for — sravan ganji
– sravan ganji, Commented Mar 24, 2018 at 1:59

Yossi · Accepted Answer · 2018-03-24 04:35:27Z

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.

edited Mar 24, 2018 at 4:35

answered Mar 24, 2018 at 4:29

Yossi

6,0877 gold badges50 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sravan ganji Over a year ago

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

Yossi Over a year ago

Then you can display a message like 'fetching data' instead of displaying the form...

Michael An · Accepted Answer · 2021-04-30 10:26:49Z

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>

answered Apr 30, 2021 at 10:26

Michael An

2621 silver badge11 bronze badges

2 Comments

MarcoS Over a year ago

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...

Michael An Over a year ago

I also agree with your idea, just use the mask to focus click event

Collectives™ on Stack Overflow

How to disable click event while fetching the data in reactjs witout jquery?

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related