使用JustPy框架实现登录页面跳转按钮失效问题求助

你的代码存在三个核心问题导致按钮无响应或页面切换失效：

1. 页面类继承错误：MenuPage继承了jp.BaseWebPage，这个类是JustPy的底层基础类，没有完整的事件绑定和页面生命周期支持，应该改用jp.WebPage。
2. 页面切换方式错误：self.delete()和a.show()不是JustPy中正确的页面内容替换逻辑，会导致页面状态混乱，无法正确渲染新内容。
3. 未绑定点击事件：HOME、FORUMS、HELP按钮没有绑定click回调函数，自然无法响应点击。

修正后的完整代码 #

import justpy as jp

class LoginPage(jp.WebPage):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        form_div = jp.Div(classes='w-64 mx-auto mt-10', a=self)
        self.username_input = jp.Input(placeholder='Username', classes='w-full mb-2 p-2', a=form_div)
        self.password_input = jp.Input(placeholder='Password', type='password', classes='w-full mb-2 p-2', a=form_div)
        # 给登录按钮添加示例点击事件
        self.login_button = jp.Button(text='Login', classes='w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded', 
                                      a=form_div, click=self.login_handler)

    def login_handler(self, msg):
        # 这里可以添加登录验证逻辑
        username = self.username_input.value
        password = self.password_input.value
        print(f"Attempting login with username: {username}, password: {password}")
        # 登录成功后返回菜单页面
        self.clear()
        MenuPage(a=self)

class MenuPage(jp.WebPage):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.menu = jp.Div(classes='flex justify-around p-4 bg-blue-500 text-white', a=self)
        self.login_button = jp.Button(text='LOGIN', classes='p-2 hover:bg-blue-700', a=self.menu, click=self.go_to_login)
        self.home_button = jp.Button(text='HOME', classes='p-2 hover:bg-blue-700', a=self.menu, click=self.go_to_home)
        self.forums_button = jp.Button(text='FORUMS', classes='p-2 hover:bg-blue-700', a=self.menu, click=self.go_to_forums)
        self.help_button = jp.Button(text='HELP', classes='p-2 hover:bg-blue-700', a=self.menu, click=self.go_to_help)

    def go_to_login(self, msg):
        # 清空当前页面内容，添加登录页面组件
        self.clear()
        LoginPage(a=self)

    def go_to_home(self, msg):
        # 主页逻辑示例
        self.clear()
        jp.Div(text='Welcome to Home Page', classes='text-xl mx-auto mt-10', a=self)

    def go_to_forums(self, msg):
        # 论坛页面逻辑示例
        self.clear()
        jp.Div(text='Forums Page Under Construction', classes='text-xl mx-auto mt-10', a=self)

    def go_to_help(self, msg):
        # 帮助页面逻辑示例
        self.clear()
        jp.Div(text='Help Center', classes='text-xl mx-auto mt-10', a=self)

jp.justpy(MenuPage)

关键修正点说明 #

• 继承正确的页面类：将MenuPage的父类改为jp.WebPage，确保事件系统和页面生命周期正常工作。
• 正确的页面切换逻辑：使用self.clear()清空当前页面的所有组件，然后直接将目标页面的实例挂载到当前页面（LoginPage(a=self)），这是JustPy中页面内容替换的标准方式。
• 绑定所有按钮的点击事件：给每个菜单按钮添加对应的click回调函数，实现页面跳转或功能触发。
• 完善LoginPage的逻辑：给登录按钮添加了示例验证逻辑，登录成功后可以返回菜单页面，形成完整的页面闭环。

内容的提问来源于stack exchange，提问作者Humza Haroon