Fred Wong

I would like to apply the disabled attribute on a div and it will disabled all the elements inside the div . Although I can apply the disabled attribute to all elements in the div but this may not be an efficient way if there are a lot of elements within the div

I found out this pretty cool solution after I did some google and I learnt something cool today.

Solution:

Set pointer-events as none for the div[disabled] in CSS

div[disabled]
{
pointer-events: none; // <---- key point
opacity: 0.7;
}

You can make div disabled by adding disabled attributes.

<div disabled>
/* Contents */
</div>

Reference:

--

--

Today I want to attach the value to material-ui button <Button value={value} /> so that I can get the value from the event.target.value in onClick.

<Button value={o.id} onClick={handleClick}>
{o.label}
</Button>

However, I found out that the event.target could be button or span depending where did we click the button because how material-ui implements the Button. It wraps the span inside button

Therefore, I did some research on google, and I found out that we could reference the target back to button by event.currentTarget .

--

--