参考链接:https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput
DOM 的oninput和onchangeoninput在输入内容的时候,持续调用,通过element.value可以持续取值,失去焦点和获取焦点不会被调用。
onchange在输入期间不会被调用,在失去焦点且失去焦点时的value与获得焦点时的value不一致(输入内容有变化)的时候才会被调用。
如果需要检测用户一个输入框的内容是否有变化,onchange就能很好地处理这种情况。
<body> <input type="text" oninput="myinput()" /> <input type="text" 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也可能是不同的元素对象。