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内的值