跳到主要内容

数据处理

Editor widget 支持动态数据处理，包括实时更新、验证以及用户触发的保存操作。开发者可以自定义 Editor widget 的行为，以满足应用程序对数据一致性和用户交互的需求。

在变更时自动保存数据​

Editor widget 可以在每次发生变更时触发自动保存。这在无法保证用户定期交互或希望尽量减少手动保存操作的场景中非常有用。

import { Editor } from "@svar-ui/react-editor";

const items = [
  // your editor item definitions
];

<Editor items={items} autoSave={true} />

将 autoSave 属性设置为 true，可确保所有变更自动保存，减少用户执行显式保存操作的需要。

禁用自动保存并要求用户手动操作​

Editor widget 支持禁用自动保存，要求用户显式保存其更改。这适用于在保存前需要用户确认或审核的工作流程。

import { Editor } from "@svar-ui/react-editor";

const items = [
  // your editor item definitions
];

<Editor items={items} autoSave={false} />

将 autoSave 设置为 false 可阻止自动保存，让用户自主控制数据的保存时机。

检测 Editor 数据的变更​

Editor widget 提供有关数据变更的详细信息，可用于追踪修改、实现自定义逻辑或高亮显示未保存的更改。

interface OnChangeResult {
  key: string;
  value: any;
  update: Record<string, any>;
}
import { Editor } from "@svar-ui/react-editor";

const items = [
  { comp: "text", key: "name", label: "Name" },
  { comp: "textarea", key: "descr", label: "Description" },
  { comp: "checkbox", key: "admin", label: "Is Admin" }
];

function onChange(ev: OnChangeResult) {
  console.log(`field ${ev.key} was changed to ${ev.value}`);
  console.log("all not saved changes", ev.update);
}

<Editor items={items} onChange={onChange} />

onChange 事件处理程序提供字段的 key、更新后的值以及所有未保存变更的映射，从而实现对修改的精细追踪。

检测用户发起的保存操作​

Editor widget 可以检测用户何时显式请求保存数据，适用于依赖用户操作的工作流程，例如提交表单或确认变更。

interface OnSaveResult {
  changes: string[];
  values: Record<string, any>;
}
import { Editor } from "@svar-ui/react-editor";

const items = [
  { comp: "text", key: "name", label: "Name" },
  { comp: "textarea", key: "descr", label: "Description" },
  { comp: "checkbox", key: "admin", label: "Is Admin" }
];

function onSave(ev: OnSaveResult) {
  console.log("changed values", ev.changes);
  console.log("latest data snapshot", ev.values);
}

<Editor items={items} onSave={onSave} />

onSave 事件处理程序提供已变更字段的信息以及当前数据状态。

检测数据的验证状态​

Editor widget 支持监控验证结果，提供数据是否有效或存在错误的反馈，有助于在保存前确保数据完整性。

interface OnValidationResult {
  errors: {
    [key: string]: {
      errorType: "validation" | "required";
    };
  };
  values: Record<string, any>;
}
import { Editor } from "@svar-ui/react-editor";

const items = [
  {
    comp: "text",
    key: "name",
    label: "Name",
    validation: (v: any) => (v && v.length > 5),
    validationMessage: "Name must be longer than 5 characters",
    required: true
  },
  { comp: "textarea", key: "descr", label: "Description" },
  { comp: "checkbox", key: "admin", label: "Is Admin" }
];

function onValidation(ev: OnValidationResult) {
  if (Object.keys(ev.errors).length > 0) {
    for (const key in ev.errors) {
      if (ev.errors[key].errorType === "required") {
        console.log(`"${key}" is required but missing`);
      } else if (ev.errors[key].errorType === "validation") {
        console.log(`"${key}" failed a custom validation rule`);
      }
    }
  } else {
    console.log("validation is ok");
  }

  console.log("latest data snapshot", ev.values);
}

<Editor items={items} onValidation={onValidation} />

onValidation 事件处理程序提供当前数据状态和验证错误信息，有助于识别未通过验证的字段，并确保数据满足预定义的要求。

将字段标记为必填​

Editor widget 支持将特定字段标记为必填，确保用户不能将这些字段留空，从而强制要求必要的数据输入。

import { Editor } from "@svar-ui/react-editor";

const items = [
  {
    comp: "text",
    key: "name",
    required: true,
  },
];

<Editor items={items} />

将 required 属性设置为 true 可使该字段成为必填项，用户必须提供值才能继续操作。

为字段定义验证规则​

Editor widget 支持为字段定义自定义验证规则，确保用户输入符合特定条件，例如格式或取值范围。

import { Editor } from "@svar-ui/react-editor";

const items = [
  {
    comp: "text",
    key: "name",
    label: "Name",
    validation: (val: string) => {
      const regEx = /^[a-zA-Z]+$/;
      return val && regEx.test(val);
    },
    validationMessage: "wrong name format"
  },
];

<Editor items={items} />

validation 属性定义用于检查字段值的函数，validationMessage 指定验证失败时显示的错误消息，从而实现对输入要求的精确控制。

相关示例：