Kinlink开发者中心

事件系统

Kinlink 提供了完整的事件系统，用于监听表单的各种状态变化，包括表单加载、字段值变更、提交等事件。

表单加载事件

FORM_LOADED 事件在表单初始化完成后触发，适合进行表单的初始化设置。

JavaScript
// 监听表单加载完成事件
kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
  const form = kinlink.formApi;
  
  // 初始化表单
  form.setFieldValue('创建时间', new Date().toISOString());
  
  // 设置初始状态
  form.hideField('高级选项');
});

字段变更事件

FIELD_CHANGE 事件在字段值发生变化时触发，可用于实现字段间的联动逻辑。

JavaScript
// 监听字段值变更事件
kinlink.events.on(kinlink.FormEvents.FIELD_CHANGE, (data) => {
  const { fieldName, value } = data;
  const form = kinlink.formApi;
  
  // 实现字段联动
  if (fieldName === '类型') {
    if (value === '高级') {
      form.showField('高级选项');
    } else {
      form.hideField('高级选项');
    }
  }
});

表单提交事件

提供表单提交前和提交后的事件监听，可以用于数据处理和提交结果处理。

JavaScript
// 监听表单提交前事件
kinlink.events.on(kinlink.FormEvents.BEFORE_SUBMIT, (data) => {
  const { values } = data;
  
  // 可以修改提交的数据
  values.submitTime = new Date().toISOString();
  
  // 返回 false 可以阻止提交
  return true;
});

// 监听表单提交后事件
kinlink.events.on(kinlink.FormEvents.AFTER_SUBMIT, (data) => {
  const { result, success } = data;
  
  if (success) {
    kinlink.formApi.showSuccess('提交成功！');
  } else {
    kinlink.formApi.showError('提交失败');
  }
});

事件类型

  • FORM_LOADED - 表单加载完成
  • FIELD_CHANGE - 字段值变更
  • BEFORE_SUBMIT - 表单提交前
  • AFTER_SUBMIT - 表单提交后

事件处理最佳实践

  • 使用 IIFE 封装事件处理逻辑
  • 及时清理不需要的事件监听
  • 处理可能的异常情况
  • 避免过多的事件监听器

注意事项

  • 事件处理函数应该是幂等的
  • 避免在事件处理中进行耗时操作
  • 合理使用错误处理机制
  • 注意事件的触发顺序

相关资源