アクセス<body>からReact

私はReactを初めて使いました。私は、「サイドバーのスライド」を含むスタンドアロンのヘッダーコンポーネントを構築しようとしています。私はサイドバーをスライドさせるCSSを適用するために状態を使用/アウト：アクセス<body>からReact

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

これは、サイドバーをスライドさせるという点で仕事をしていませんが、サイドバーが開いていると、私はoverflow:hiddenを適用することにより、身体にスクロールをロックしたいです<body>にしかし、<body>がReactの外にあるので、私はタグにアクセスすることが可能であると思っていましたか？

Link to Codepen

出典

2017-09-10 Jan Cziżikow

必要なスタイルを設定するには、document.bodyを使用します。準備が整ったらdocumentにアクセスしてください。componentWillMountにコードを入れてください。 componentWillUnmountでコンポーネントをアンマウントした後にスタイルをリセットする必要があります。

componentWillMount() { 
    document.body.style.overflow = "hidden"; 
} 

componentWillUnmount() { 
    document.body.style.overflow = "visible"; // or restore the original value 
}

あなたのコメントの後、私はあなたのサイドバーを開いた後にスタイルを設定する必要があることに気づきました。ここでいくつかのノート：

setStateにthis.stateを使用しないでください。 setStateは非同期なので、以前の状態オブジェクトにアクセスするには、オプションのprevStateパラメータを使用する必要があります。
オプションの第2パラメータsetStateを使用できます。これは関数であり、状態が更新された後に呼び出されます。この関数では、ボディのスタイルを設定できます。
コンストラクタ内の関数bindを使用できます。
コンストラクタでは、propsをベースコンストラクタ（super(props)）に渡します。
sideBar〜isSideBarOpenの名前を変更します。それはよりわかりやすい名前です。ここで

最終的なコードは次のとおりです。

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

出典

2017-09-10 17:29:14

ありがとうDávid、コンポーネントWillMount一度体にスタイルを追加しようとしましたが、

コンポーネントは常に私のアプリに存在するので、単に本体のスクロールをロックします。それは私がアプリケーションの構造を変更する必要がありますか？おそらく、サイドバーを

以外の別のコンポーネントとして追加するのでしょうか？ –

情報ありがとう、私は私の答えを更新しました。 –

詳細な回答ありがとう！私はupdateBodyStylesが定義されていないというエラーが出ていたので、 'this.updateBodyStyles'に変更しました。 –

溶液もサイドバーとオーバーレイを挿入することができます。

この簡単な例は、アイデアを伝えるためのものです。あなたはそれをあなたが望むようにスタイルすることができます。

// style 
.navOwerflow { 
    display: none; 
} 
.navOwerflow.open { 
    position: absolute; 
    width: 100%; 
    height: 1000px; // get this height from window 
    z-index: 2; 
    opacity: 0.9; 
    background-color: rgba(0,0,0,1); 
} 

// component 
<header className="header"> 
     <div className={`navOwerflow ${(this.state.open && 'open')}`}></div> 
     <div className="navContainer"> 
      ... 
     </div> 
... 
</header>

出典

2017-09-10 16:39:43 bennygenel

おかげで、公正なポイント。私はオーバーレイを追加し、クリック時にバーガーメニューを 'X'に変更しましたが、体のスクロールをロックする方法をまだ理解できません。 –

答えて

関連する問題