React 点击按钮显示div与隐藏div
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React 点击按钮显示div与隐藏div</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <style type="text/css"> .m-test{width: 100px;height: 100px;background-color: red;} </style> </head> <body> <div id="root"></div> <script type="text/babel"> class Toggle extends React.Component { constructor(props) { super(props); this.state = { isToggleOn: true, dispaly: 'block' }; // 这个绑定是必要的,使`this`在回调中起作用 this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn, display: prevState.isToggleOn ? 'none': 'block' })); } render() { return ( <div> <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> <div className="m-test" style={{display: this.state.display}}></div> </div> ); } } ReactDOM.render( <Toggle />, document.getElementById('root') ); </script> </body> </html>
更多相关技术文章,请访问HTML中文网!
以上就是react怎么设置div隐藏的详细内容,更多请关注易知道|edz.cc其它相关文章!