[英]onClick event not working within nested React / Next.js component
[英]React onClick event handler not working using Next.js
我正在制作一个Reddit克隆,我正在使用Next.js,所以它的服务器端渲染。 我开始没有使用Next.js,当我了解它时,我立即切换到它。
我已经创建了一个自定义_app.js
因此每个页面上都存在标题和侧边栏,并且它可以作为保存应用程序状态的最顶层组件。 后者还不太合适。
这是.project/src/pages/_app.js
:
import App, { Container } from 'next/app';
// Components
import Header from '../components/Header/Header';
const MainLayout = props => (
<React.Fragment>
<Header
isSidebarOpen={props.isSidebarOpen}
sidebarToggle={props.sidebarToggle}
/>
{props.children}
</React.Fragment>
);
export default class MyApp extends App {
static async getInitialProps({ Component, router, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
state = {
isSidebarOpen: true
};
sidebarToggle = () => {
this.setState({ isSidebarOpen: !this.state.isSidebarOpen });
};
render() {
const { Component, pageProps } = this.props;
return (
<Container>
<MainLayout
isSidebarOpen={this.state.isSidebarOpen}
sidebarToggle={this.sidebarToggle}
>
<Component {...pageProps} />
</MainLayout>
</Container>
);
}
}
我遇到的问题是, isSidebarOpen
和sidebarToggle
正被传递到我需要它们的位置 - 它们出现在控制台中 - 但是onClick处理程序没有激活,如果我改变isSidebarOpen
,它直到我才生效重启服务器。 我在使用Next.js之前使用了这种方法,它按预期工作。
我怎样才能实现我想做的事情? 我已经阅读了文档,搜索了Google和Stack Overflow。 我甚至没有运气就检查了他们的回购问题。 我怀疑它与自定义_app.js
,因为道具正确传递下来。
一种可能性是在你正在使用的组件中定义你的sidebarToggle
函数。(也许因为在Component中调用它代码可能在_app.js而不是你的组件中运行,这可能是一个很大的!但值得一试)
这里_app.js
是你的应用程序的包装器,我不认为它适合在最顶层的组件中使用来保持状态。 最好做一个简单的反应根组件做到这一点!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.