Input使用debounde遇到的坑

Input 在使用debounce时会报错：

Uncaught TypeError: Cannot read property 'value' of null。

import react, { Component } from 'react';
import { debounce } from 'lodash.debounce';

export default class Debounce extends Component {
  printChange(e) {
    console.log('value :: ', e.target.value);
    // call ajax
  }
  render() {
    return (
      <div>
        <input onChange={debounce(this.printChange, 500)} />
      </div>
    );
  }
}

可是这么作以后，浏览器就会报异常： Uncaught TypeError: Cannot read property ‘value’ of null。为何会这样？这里就涉及到了 react 事件系统 中的一个概念：合成事件。浏览器

合成事件（SyntheticEvent）
事件处理程序经过 合成事件（SyntheticEvent）的实例传递，SyntheticEvent 是浏览器原生事件跨浏览器的封装。SyntheticEvent 和浏览器原生事件同样有 stopPropagation()、preventDefault() 接口，并且这些接口夸浏览器兼容。异步

事件池（Event Pooling）
SyntheticEvent 是池化的. 这意味着 Synthe