Streamlit单页切换登录/注册表单时提交功能失效问题

问题原因 #

你用st.button直接控制表单显示的逻辑存在缺陷：Streamlit的普通按钮返回值仅在点击后的单次页面运行中有效，页面刷新后按钮状态会重置，导致切换表单后页面重新渲染时，show_create_account会变回初始的False，进而丢失表单输入数据，且提交按钮无法触发对应逻辑。

解决方案 #

用st.session_state持久化切换状态，通过按钮修改会话状态里的变量，再根据这个变量决定显示哪个表单。

修正后的代码 #

# 初始化会话状态变量，默认显示登录表单
if "show_create_account" not in st.session_state:
    st.session_state.show_create_account = False

# 切换按钮逻辑
col1, col2 = st.columns(2)
with col1:
    if st.button("登录", use_container_width=True, disabled=not st.session_state.show_create_account):
        st.session_state.show_create_account = False
with col2:
    if st.button("注册", use_container_width=True, disabled=st.session_state.show_create_account):
        st.session_state.show_create_account = True

# 根据会话状态显示对应表单
if st.session_state.show_create_account:
    with st.form(key="new_user_form"):
        new_email = st.text_input(label="邮箱", key="reg_email")
        new_password = st.text_input(label="密码", type="password", key="reg_pwd")
        new_password_confirm = st.text_input(
            label="确认密码", type="password", key="reg_pwd_confirm"
        )

        new_submit = st.form_submit_button(label="创建账号")
        if new_submit:
            if new_password != new_password_confirm:
                st.error("两次输入的密码不一致")
            else:
                x = get_auth().create_user_with_email_and_password(
                    new_email, new_password
                )
                print("账号创建成功: ", x)
                # 注册成功后切换回登录表单
                st.session_state.show_create_account = False
else:
    with st.form(key="login_form"):
        email = st.text_input(label="邮箱", key="login_email")
        password = st.text_input(label="密码", type="password", key="login_pwd")

        submit = st.form_submit_button("登录")
        if submit:
            if email and password:
                auth_user(email, password)
                st.success("登录成功!")
            else:
                st.error("请输入邮箱和密码")

关键优化点 #

• 用st.session_state持久化切换状态，确保页面刷新后仍能保留当前要显示的表单类型
• 给每个输入框添加唯一key，避免切换表单时输入数据丢失
• 切换按钮添加disabled属性，避免重复点击当前激活的按钮
• 注册成功后自动切换回登录表单，提升用户体验

内容的提问来源于stack exchange，提问作者engineer-x