如何通过Python函数点击streamlit.components.v1按钮时修改段落文本

完整解决方案代码 #

import streamlit as st
import streamlit.components.v1 as components

# 初始化会话状态，存储段落文本（页面刷新时保留数据）
if 'para_text' not in st.session_state:
    st.session_state.para_text = "Hello world"

def my_fun():
    # 修改会话状态中的文本内容
    st.session_state.para_text = "按钮已点击！段落内容更新完成"

# 动态生成HTML：嵌入会话状态的文本，添加按钮点击事件
a = f"""
<div>
<button id="my_btn" onclick="Streamlit.setComponentValue('btn_trigger', true)">Click Me!</button>
<p id='my_para'>{st.session_state.para_text}</p>
</div>
<script>
// 监听组件值变化，触发后重置信号避免重复回调
Streamlit.onValueChange('btn_trigger', function(value) {{
    if (value) {{
        Streamlit.setComponentValue('btn_trigger', false);
        Streamlit.setFrameHeight(); // 确保页面重新渲染文本
    }}
}});
</script>
"""

# 渲染HTML组件，绑定回调函数
components.html(a, height=800, width=1200, on_change=my_fun, key="btn_trigger")

关键实现说明 #

• 会话状态管理：用st.session_state存储段落文本，解决Streamlit页面刷新后数据丢失的问题，确保修改后的文本能持久保留。
• 前后端通信：通过Streamlit内置的Streamlit.setComponentValue和Streamlit.onValueChangeAPI，实现前端按钮点击信号传递到Python后端。
• 回调触发：在components.html中指定on_change=my_fun和唯一key，当组件值变化时自动调用Python函数修改文本。
• 动态文本渲染：HTML中的段落文本直接插入st.session_state.para_text的值，每次页面重新运行时都会同步最新的文本内容。

内容的提问来源于stack exchange，提问作者muchhar bharat