Change Registed Events

I have a project where ui stays the same, but the events that are registered to each components will change.

Letโ€™s say I have a button and a radio.

my_button = gr.Button("do sth")
mode = gr.Radio(["a", "b"],
                            label="choose mode",
                            value="a")

I want my button to do function a when mode is a and do function b when mode switches to b.

mode.change(fn=change_mode,
                        inputs=[mode, my_button],
                        outputs=[my_button])
def change_mode(mode, my_button):
    if mode == "a":
        my_button.click(func_a, inputs=[x, y, z], outputs=[x, y], cancels=["need to cancel previous event"])
    else:
        my_button.click(func_b, inputs=[x], outputs=[x], cancels=["need to cancel previous event"])

I wonder how should I implement this feature? Notice that, I simplified code here. In my project, I have bunch of events need to change in each mode.

Hi @KKKatrina thanks for asking in the Forums! My recommendation would be to use a gr.State() to store the mode. You can pass this state variable into your functions and toggle the behavior as needed, analogous to your radio button here.

Read more about state here: State In Blocks

Yes I can store mode in gr.State. But I wonder how should I change the behaviour of my_buttonโ€™s click event? When mode changes, I need to cancel the previous events so that I can add a new click event. I am not sure how to do this.