React 中的 onInput/onChange

xuweiblog發表於2021-03-02
React

參考連結：https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput

DOM 的oninput和onchange

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 中的onInput和onChange

參考 Document how React's onChange relates to onInput

React 的onInput和onChange並沒有多少區別，其作用都是在使用者持續輸入的時候觸發，不在失去獲取或者失去焦點的時候觸發。

要獲取焦點相關的事件需要通過onFocus和onBlur。而需要檢測使用者輸入的內容是否有變化則需要手動去取值對比，沒有原生的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>,而onChange是React.ChangeEvent<HTMLInputElement>，已經區分開了表單Form事件和Change事件。

onChange對應的多個target，猜測是因為onChange可以用在其他的元素上，傳入的泛型不一定是HTMLInputElement，如select

select 的onchange事件：

((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層面能看出的就是onInput和onChange基於的事件不一樣（React.FormEvent和React.ChangeEvent），而onChange事件可用於不同的元素中，target也可能是不同的元素物件。

相關文章