React 中的 onChange 和 onInput

参考链接：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<HTMLSelectElement>) => 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也可能是不同的元素对象。

DOM 的oninput和onchange

React 中的onInput和onChange

DOM 的`oninput`和`onchange`

React 中的`onInput`和`onChange`