How to add a component with event handler? about reflexify HOT 2 CLOSED

from app.core.base import RxBasePage
from app.helpers.nav_helpers import NavHelper
import reflex as rx
from app.states.counterState import CounterState

def CounterComponent():
    return rx.box(
        rx.text("Counter App", font_size="1.5em"),
        rx.spacer(),
        rx.hstack(
            rx.button(
                rx.icon(tag="add"), color="green", on_click=CounterState.increment
            ),
            rx.text(f"{CounterState.count}"),
            rx.button(
                rx.icon(tag="minus"), color="red", on_click=CounterState.decrement
            ),
        ),
    )


class RxPage:
    # Title of page: must match high-level key in config.py
    def __title__(self):
        return "Reflexfy"

    # Page route path: must follow /parent-key/file-name *without .py extension*
    def __route__(self):
        return "/"

    # Left navigation panel: automated based on config navigation order
    def __left_navigation__(self):
        nav: list = NavHelper.__get_left_navigation__(self.__title__())
        return NavHelper.__set_left_navigation__(nav)

    # Right navigation panel: TBD
    def __right__navigation__(self):
        return []

    # Mobile navigation drop down
    def __mobile_navigation__(self):
        return NavHelper.__get_left_navigation__(self.__title__())

    # Main content area: takes in rx.Componenets and passes them to base file
    def __components__(self):
        return [CounterComponent()]

    # Build method: creates a new instance for the page above
    def build(self):
        page = RxBasePage(
            self.__components__(),
            self.__left_navigation__(),
            self.__right__navigation__(),
            self.__mobile_navigation__(),
        )
        return page.build()

from .mainState import MainState

class CounterState(MainState):
    count: int = 0

    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1