javascript - Access <body> from React -


i'm new react , trying build standalone header component containing 'slide in sidebar'. used state apply css slide sidebar in/out:

constructor() { super();   this.state = {     sidebar: false   } } handlesidebar() {   this.setstate({     sidebar: !this.state.sidebar   }); } render() { return(   <header>    <ul style={this.state.sidebar ? {'transform': 'translatex(0%)'} : null}></ul>    <button onclick={this.handlesidebar.bind(this)}></button>   </header> )

this job in terms of sliding sidebar, once sidebar open, lock scroll on body applying overflow:hidden <body>. since <body> outside of react, wondering how it's possible access tag?

link codepen

use document.body set styles need. make sure access document after it's ready, put code in componentwillmount. should reset styles after unmounting component in componentwillunmount.

componentwillmount() {     document.body.style.overflow = "hidden"; }  componentwillunmount() {     document.body.style.overflow = "visible"; // or restore original value }

after comment realized need set styles after opening sidebar. here notes:

  1. don't use this.state in setstate. setstate asynchronous, therefore should use optional prevstate parameter access previous state object.
  2. you use optional second parameter of setstate function , called after state updated. in function set styles of body.
  3. you can bind function in constructor.
  4. in constructor pass props base constructor (super(props)).
  5. rename sidebar issidebaropen. more descriptive name.

here final code:

constructor(props) {     super(props);     this.state = {         issidebaropen: false     };     this.togglesidebar.bind(this); }  updatebodystyles() {     if (this.state.issidebaropen) {         document.body.style.overflow = "hidden";     } else {         document.body.style.overflow = "visible";     } }  togglesidebar() {     this.setstate((prevstate) => {         return { issidebaropen: !prevstate.issidebaropen }     }, this.updatebodystyles); }  render() {     return (        <header>             <ul style={this.state.issidebaropen? {'transform': 'translatex(0%)'} : null}></ul>             <button onclick={this.togglesidebar}></button>        </header>     )

Comments

Post a Comment

Popular posts from this blog

resizing Telegram inline keyboard -

telegram's inline keyboard great feature lots of different use cases. inline buttons added list of items this: inline_keyboard = [[inlinekeyboardbutton(text="button", callback_data="button"), inlinekeyboardbutton(text="reset",callback_data="reset")]] inline_keyboard_markup = inlinekeyboardmarkup(inline_keyboard) update.message.reply_text("hi", reply_markup=inline_keyboard_markup) the above code adds 2 buttons each half width of chat screen. i know the normal keyboard button there resize_keyboard parameter somehow can used. my question is there way resize inline buttons ? example make full width or quarter width. unfortunately, can't now. :( you can suggest @botsupport , might add feature next version.
Read more

javascript - How to bind ViewModel Store to View? -

i'm pretty new ext js , trying embed multiselect inside panel . the viewmodel has stores property can see here: ext.define('test.view.controls.search.searchfiltermodel', { extend: 'ext.app.viewmodel', alias: 'viewmodel.filter', data: { title: '' }, stores: { test: { fields: [ 'id', 'name' ], proxy: { type: 'ajax', url: 'api/test', reader: 'array' }, autoload: true } } }); i bind in view this: viewmodel: { type: 'filter' }, layout: 'fit', border: 1, plain: true, scrollable: 'y', layout: 'fit', bind: { title: '{title}', }, items: { xtype: 'multiselect', scrollable: false, allowblank: true, ddreorder: true, bind: { store: '{test}' }, valuefield: 'id', displayfield: 'name' } ...
Read more

c - Why does alarm() cause fgets() to stop waiting? -

i playing around signals in c. main function asks input using fgets(name, 30, stdin) , , sits there , waits. set alarm alarm(3) , , reassigned sigalrm call function myalarm calls system("say pay attention") . after alarm goes off, fgets() stops waiting input , main fn continues on. happens if change myalarm set variable , nothing it. void myalarm(int sig) { //system("say pay attention"); int x = 0; } int catch_signal(int sig, void (*handler)(int)) { // when signal comes in, "catch" , "handle it" in way want struct sigaction action; // create new sigaction action.sa_handler = handler; // set it's sa_handler attribute function specified in header sigemptyset(&action.sa_mask); // "turn signals in sa_mask off?" "set sa_mask contian no signals, i.e. nothing masked?" action.sa_flags = 0; // not sure, looks aren't using of available flags, whatever may return sigaction(sig, ...
Read more