Component Events

You can listen to events thrown within components and handle these events through the on and emit configuration items.

Listening to Component Events

Using the on configuration item, you can directly define event listeners in rules and handle events emitted by components. The following example shows how to listen to component events through on.

Listening to Component Events Through Form Tags

Using the emit configuration item, you can listen to events triggered by components through form tags. The following example shows how to use emit to listen to events.

Note

When using emit to listen to events, uppercase letters in event names will be automatically converted to -lowercase format. For example, the change event of the inputField component will be converted to input-field-change.

Modifying Event Prefix

By setting emitPrefix, you can add a custom prefix to event names to enhance event descriptiveness. The generated format is ${emitPrefix}-${eventName}. The example below demonstrates the specific configuration method.

Listening to Events Through api.on Method

Using the api.on method, you can dynamically listen to events emitted by form components in code, providing a more flexible event handling approach. The following example shows how to use the Api.on method to listen to events.

Getting API in Events

This guide explains how to get the API object for operating forms in event handling, and how to use the event injection feature to pass additional data.

Note

The event injection feature can inject parameters such as api, rule, etc. into events.

After enabling event injection through the inject configuration item, injected parameters will be added at the first position of the callback event parameters.

Data Structure

The parameter structure used by the event injection feature is as follows:

type InjectArg = {
    api: APi,//api
    rule: Rule[],//Generation rules
    self: Rule,//Current generation rule
    option: Object,//Global configuration
    inject: Any,//Custom injected parameters
    args: any[],//Original callback parameters
}

Event Injection

By configuring inject, you can inject the form API object and other custom data into event handler functions, making it convenient to access and manipulate form data in events.

Globally Enabling Event Injection

You can also globally enable event injection by setting the form global configuration item injectEvent: true, so that all events and native events will automatically inject event parameters. This configuration is suitable for scenarios where you need to uniformly handle form API and other data in all events.