Dash 2.11中按钮禁用5秒后无法触发点击的问题排查

你直接通过document.getElementById(component_id).disabled = false修改DOM属性的方式，破坏了Dash（基于React）的状态管理机制。React会维护组件的内部状态，手动修改DOM后，React的内部状态和实际DOM状态不匹配——虽然按钮看起来已经启用，但React仍然认为它处于禁用状态，因此不会响应点击事件。

改用Dash官方提供的dash_clientside.set_props方法来更新组件属性，让React同步状态。具体修改如下：

1. 调整Python端的客户端回调 #

移除不必要的id输入项，添加prevent_initial_call=True避免初始加载触发：

self.app.clientside_callback(
    ClientsideFunction(namespace="foo", function_name="toggle_expand_button"),
    Output(self._expand_id, "disabled"),
    Input(self._expand_id, "n_clicks"),
    prevent_initial_call=True,  # 防止页面加载时触发回调
)

2. 修改JavaScript函数 #

用dash_clientside.set_props替代直接DOM操作，确保React状态同步：

toggle_expand_button: function(n_clicks) {
    console.log("n_clicks: " + n_clicks)

    if (n_clicks > 0) {
        // 获取当前组件的ID
        const component_id = this.props.id;
        // 立即返回true禁用按钮
        setTimeout(() => {
            // 5秒后通过Dash API更新组件状态
            dash_clientside.set_props(component_id, { disabled: false });
        }, 5000);
        return true;
    }
    // 默认返回false（未点击时的状态）
    return false;
}

dash_clientside.set_props会通知React更新组件的内部状态，确保DOM显示和React的状态保持一致，这样按钮在5秒后不仅视觉上启用，React也会正常响应点击事件。

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