參考連結：https://***.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput
DOM 的 oninput
onchange
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
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
也可能是不同的元素對象。
![React中對于this.setState參數為函數或對象的問題。[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)