Event Handling
Event handling is one of the most common logical implementations in system development. Yida provides general user action binding functionality and provides an action panel for writing JS processing logic. Usually, to implement event handling functionality, the following two steps are required:
- Add action binding configuration to components (almost every component provides corresponding action binding options);
- Implement action handling logic in the action panel;
When performing action binding, users can set action parameters, as shown below. The parameters set in the handling function can be read through this.params.xxx, where xxx is the parameter set by the user.
Parameter acquisition method:
export function onClick(){
const { name, age } = this.params
console.log(name, age);
}
Usage Scenarios
The following introduces a simple example of using event handling:
Listen for a button click event and pop up a dialog to display relevant information. To implement an event handling function, users need to perform two operations:
- Bind user operation events to components. As shown below, we bind an onClick event to the button component;
- Implement the relevant event handling logic in the action panel. When users click the button, we display a message dialog (state.name is a global variable we set, with an initial value of "小明");
Users click the preview button in the upper right corner to see the following preview effect. When users click the Hello button, the program displays a dialog showing "Hello 小明".
