React 中的 onInput/onChange


参考链接:https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput

DOM 的oninputonchange

oninput在输入内容的时候,持续调用,通过element.value可以持续取值,失去焦点和获取焦点不会被调用。

onchange在输入期间不会被调用,在失去焦点且失去焦点时的value与获得焦点时的value不一致(输入内容有变化)的时候才会被调用。

如果需要检测用户一个输入框的内容是否有变化,onchange就能很好地处理这种情况。

  <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>

React 中的onInputonChange

参考 Document how React's onChange relates to onInput

React 的onInputonChange并没有多少区别,其作用都是在用户持续输入的时候触发,不在失去获取或者失去焦点的时候触发。

要获取焦点相关的事件需要通过onFocusonBlur。而需要检测用户输入的内容是否有变化则需要手动去取值对比,没有原生的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>
  );
}

查看对应的参数的TypeScript类型:

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

onInput的参数是React.FormEvent<HTMLInputElement>,而onChangeReact.ChangeEvent<HTMLInputElement>,已经区分开了表单Form事件和Change事件。

onChange对应的多个target,猜测是因为onChange可以用在其他的元素上,传入的泛型不一定是HTMLInputElement,如select

selectonchange事件:

((event: React.ChangeEvent ) => void) | undefined

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

继续往下查看SyntheticEvent

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

继续看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;
    }

这里就是React合成事件的基础interface了,也含有target,阻止事件冒泡的stopPropagation和阻止默认行为的preventDefault都在这里了。从TS层面能看出的就是onInputonChange基于的事件不一样(React.FormEventReact.ChangeEvent),而onChange事件可用于不同的元素中,target也可能是不同的元素对象。

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

  • 分享:
评论
还没有评论
    发表评论 说点什么