SedationH Avatar

React onChange and onInput

Published on July 4, 2024
View on GitHub

写 input 的时候突然在想用 onChange 还是 onInput，有啥区别

搜了下

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

结论是没区别，都是onInput...社区里也在吐槽这种人为造成的和标准不一致的行为

两者在原生下是有差异的 验证了下原生下的行为

https://codepen.io/sedationh/pen/PorYqaE?editors=1011

行为

  1. 输入 123
  2. 输入框失焦
  3. 输入 45
  4. 删除 45
  5. 输入框失焦
CODE
"handleInput: Input value changed: 1"
"handleInput: Input value changed: 12"
"handleInput: Input value changed: 123"
"handleChange: Change detected: 123"
"handleInput: Input value changed: 1234"
"handleInput: Input value changed: 12345"
"handleInput: Input value changed: 1234"
"handleInput: Input value changed: 123"

可见原生行为

  • oninput 用户输入就会触发
  • onchange 用户输入失焦+有差异才会触发