Skip to main content

onChange

Description​

Fires when the value of a control within the toolbar changes

Usage​

onChange?: (ev: {
  value: any;
  item: {
    id?: string | number;
    comp?: string;
    icon?: string;
    css?: string;
    text?: string;
    menuText?: string;
    key?: string;
    spacer?: boolean;
    collapsed?: boolean;
    handler?: (item: any, value?: any) => void;
    layout?: "column";
    items?: any[];
    [key: string]: any;
  };
}) => void;

Parameters​

The callback receives a single parameter ev - an object with the following fields:

  • value - (required) the new value of the control. Its type depends on the component used (e.g., string for a text field, boolean for a checkbox, number for a spinner)

  • item - (required) the toolbar item that triggered the change. The description of its parameters see here items

Example​

type OnChangeResult = {
  // New value of the control
  value: any;
  // Changed control item
  item: {
    id?: string | number;
    comp?: string;
    icon?: string;
    css?: string;
    text?: string;
    menuText?: string;
    key?: string;
    spacer?: boolean;
    collapsed?: boolean;
    handler?: (item: any, value?: any) => void;
    layout?: "column";
    items?: any[];
    [key: string]: any;
  };
};

const items = [
  { id: "name", comp: Text },
  { id: "email", comp: Text },
];

function handler(ev: OnChangeResult) {
  const { item, value } = ev;
  console.log("changed control", item.id);
  console.log("new value", value);
}

<Toolbar items={items} onChange={handler} />