react受控组件中onChange事件和原生js中区别

Question

在React组件中，经常用到受控组件，核心代码如下

handleChange(e) {
  this.setState({
    value: e.target.value,
  })
}


render() {
  let {value} = this.state;

  return(
    <input value={value} onChange={this.handleChange.bind(this)} />
  )
}

此时随着输入框的输入值实时触发onChange事件，从而实时更新input中的值。

但是在原生js中(参考W3C)，onchange是在input失去焦点时才会触发，那么问题就是同样是onChange事件，触发机制为什么不同呢？

我注意到的就是两个事件中onchange的c存在大小写的区别

Answer 1

react 的 onChange 伴随着state的改变 而state的改变会即时的渲染页面 所以input即时更新
原生的onchange当失去焦点时才会去判断input内的值

Answer 2

React传给你的不是浏览器原生事件 (一般是DOM level 2或3)， 而是为消除浏览器的差异自己定义的一套(SyntheticEvent)。

比较保守地想，可以认为是两套仅是名字差不多的事件。