web-dev-qa-db-ja.com

ルート変更時の状態の変更Next.js

こんにちは、next.jsでナビゲーションを切り替えています。正常に機能します。ルートが変更されたときにナビゲーションを再び閉じたいだけです。

たとえば、ホームページでナビゲーションを切り替えた場合、ナビゲーションが開き、Aboutページへのリンクが表示されます。そのリンクをクリックすると、期待どおりに概要ページが表示されますが、ナビゲーションはまだ開いています！

私はいくつかのことを試しました-onRouteChangeComplete（url）を利用したいのですが、navActive状態を更新するのに苦労しています。

私のpage.jsファイル：

class Page extends Component {
  state = {
    navActive: false
  };

  toggle = () => {
    this.setState({
      navActive: !this.state.navActive
     });
  };

  render() {
    return (
      <ThemeProvider theme={theme}>
        <StyledPage className="full-page-wrapper">
          <Meta />
          <Header navActive={this.state.navActive} toggle={this.toggle} />
          <PrimaryContent>{this.props.children}</PrimaryContent>
          <GlobalStyle />
        </StyledPage>
      </ThemeProvider>
    );
  }
}

次に、ヘッダーファイル：

class Header extends React.Component {
  render() {
    return (
      <HeaderSide

        <HeaderToggleBar onClick={() => this.props.toggle()} />

      </HeaderSide>
    );
  }
}

したがって、アプリはnavActive状態がfalseで始まり、HeaderToggleBar要素をクリックすると、ナビゲーションが開いたり閉じたりします。ただし、ルートが変更された場合は、ナビゲーションを閉じる必要があります。ヘッダー内のナビゲーションアイテムにクリックイベントを配置できると思います（新しいページをクリックするとトグルします）が、少し上にあるようです。

ありがとうございました。

javascriptreactjsnext.js
5
user3725781

コールバックをバインドする必要があると思います。コンストラクタを追加する必要がある場合もあります。これは、ファイルのアップロードを受け入れるプロジェクトのスニペットです。

    class Files extends React.Component {
        // define your constructor and call super before setting state vars
        constructor(props){
            super(props);
            this.state = {
                uploadStatus: false
            }
            // Bind your callback
            this.handleUploadImage = this.handleUploadImage.bind(this);
            // set other initial vars if needed
        }

        handleUploadImage(files){
            // do stuff with the files
        }

        render () {
            return (
                <div id="fileContainer">
                    <MyDropzone id={this.props.project._id} onDrop={this.handleUploadImage}>
                        {({getRootProps}) => <div {...getRootProps()} />}
                    </MyDropzone>
                </div>
            )
        }
    }
0
Brock