Skip to main content

onChange

Description​

Fires when a number is changed in the counter

Usage​

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

Parameters​

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

Example​

function handleChange(ev: { value: number; input?: boolean }) {
  const newValue = ev;
  console.log(newValue);
  // => {value: 2, input: true}
}

<Counter value={1} onChange={handleChange} />

Details​

The handler function receives the new value of the counter 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 number is being typed), the onChange prop of the Counter component will be called with an object that includes input: true
  • if the change event of the HTML input is caught (a user has applied changes), the onChange prop of the Counter component will be called with an object that does not include the input property

Note: the handler is called with the value object as the first argument (not a DOM Event).

Related article: Catching the change of the value