Skip to main content

onChange

Description​

Fires on change of the value of an input, i.e. on the HTML input event

Usage​

onChange?: (ev: { value: string | number; input?: boolean }) => void;

Parameters​

  • value - (required) the value of the input
  • input - (optional) true, if text is being typed (check details)

Example​

function Example() {
  function handleChange(ev: { value: string | number; input?: boolean }) {
    const text = ev.value;
    console.log(text);
    // => {"the typed text"}
  }

  return <Text placeholder="Type here" onChange={handleChange} />;
}

Details​

The handler function receives an object with the text typed in the input. The received object may also contain input:true, depending on the fired HTML input event:

  • if the input event of the HTML input is caught (a text is being typed), the change event of the Text control will have input:true
  • if the change event of the HTML input is caught (a user has applied changes), the change event of the Text control won't have the input property

Related article: Catching the change of the value