OnInput/onChange in React

Aaron

1 year ago

oninput and onchange of DOM

oninput when entering content, it is called continuously, and the value can be taken continuously through element.value . Losing focus and getting focus will not be called.

onchange is not called during input, but only when the value when losing focus and losing focus is inconsistent with value when gaining focus (the input changes).

if you need to detect whether the contents of one of the user's input boxes have changed, onchange can handle this situation very well.

<body>
  <input type="text" id="myInput" oninput="myinput()" />
  <input type="text" id="change" onchange="mychange()" />
</body>
<script>
  function myinput() {
    var x = document.getElementById("myInput").value;
    console.info("input", x);
  }
  function mychange() {
    var x = document.getElementById("change").value;
    console.info("change", x);
  }
</script>

`onInput` and `onChange` in React

There is not much difference between onInput of React and onChange . It is triggered when the user continues to type, not when the user loses access or focus.

to get focus related events, you need to use onFocus and onBlur . If you need to check whether the content entered by the user has changed, you need to compare the values manually, which is not as convenient as the native onChange .

export default function InputChange() {
  function input(e) {
    console.info("input", e.target.value);
  }
  function change(e) {
    console.info("change", e.target.value);
  }
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <input onFocus onBlur onInput={input}></input>
      <input onChange={change}></input>
    </div>
  );
}

check the TypeScript type of the corresponding parameter:

 <input onInput={(evt: React.FormEvent<HTMLInputElement>) => {}}></input>
 <input onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {}}></input>

The argument to

onInput is React.FormEvent , while onChange is React.ChangeEvent , which distinguishes the form Form event from the Change event.

onChange corresponding to target , guess because onChange can be used on other elements, and the passed generic type is not necessarily HTMLInputElement , such as select

.

select onchange event:

((event: React.ChangeEvent) = & gt; void) | undefined

interface FormEvent<T = Element> extends SyntheticEvent<T> {}
interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
  target: EventTarget & T;
}

continue to view SyntheticEvent :

interface SyntheticEvent<T = Element, E = Event>
  extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}

continue to see BaseSyntheticEvent :

interface BaseSyntheticEvent<E = object, C = any, T = any> {
  nativeEvent: E;
  currentTarget: C;
  target: T;
  bubbles: boolean;
  cancelable: boolean;
  defaultPrevented: boolean;
  eventPhase: number;
  isTrusted: boolean;
  preventDefault(): void;
  isDefaultPrevented(): boolean;
  stopPropagation(): void;
  isPropagationStopped(): boolean;
  persist(): void;
  timeStamp: number;
  type: string;
}

this is the basis for React composite events interface , and also includes target , stopPropagation that prevents the event from bubbling, and preventDefault that prevents default behavior. What you can see from the TS level is that onInput and onChange are based on different events ( React.FormEvent and React.ChangeEvent ), while onChange events can be used in different elements, and target may also be different element objects.

onInput and onChange in React

`onInput` and `onChange` in React