There is no special disabled property for DIV elements. For DIV elements, we have to show another DIV on top of the present div element. The cover DIV won't be have any content and it is transparent. Users can see content through this cover div.
To Run Example Code
execute below commands
npm install
npm start
npm start
now open index.html in browser
CSS
myDiv is main div. cover div is for blocking main div
#myDIV { overflow: scroll; height: 300px; border: 1px solid #ccc; margin: 10px; width: 300px; cursor: pointer; position: relative; } #cover { position: absolute; height: 100%; width: 100%; z-index: 1; background-color: #ddd; opacity: 0.3; }
Script
Observe below code
import React from 'react' class ExampleApplication extends React.Component { constructor(props) { super(props); this.state = { disableDiv: false }; this.disableDiv = this.disableDiv.bind(this); this.enableDiv = this.enableDiv.bind(this); } disableDiv() { this.setState({ disableDiv:true }); } enableDiv() { this.setState({ disableDiv:false }); } render() { var divStyle = { display:this.state.disableDiv?'block':'none' }; return ( <div> <button onClick={this.disableDiv}>Disable Below UI</button> <button onClick={this.enableDiv}>Enable Below UI</button> <div id="myDIV"> <div id="cover" style={divStyle}></div> div 1<br /> <a href="">link 1</a> </div> </div> ); } } ExampleApplication.propTypes = { } ExampleApplication.defaultProps = { } export default ExampleApplication;
Very detail-oriented post! We at http://writingdaddy.com/
ReplyDeletehave a large number of readers so i think having it disseminated on a more popular website and to the bigger population of readers.I think you need a little more marketing to get these ideal readers and improve your web visibility.
I agree with you. I too have found services from http://writingdaddy.com/ are very useful indeed. Apart from the that i also am a regular reader of their blog. This blog can improve a lot im sure.
DeleteGreat
ReplyDeleteI used it on my react app and it didn't work.
ReplyDelete"react": "^16.6.0",
"react-dom": "^16.6.0",
It does not disable....It hides the elemet wrong solution...:(
ReplyDeleteThis just hides the element
ReplyDelete