react的input防抖遇到的问题

在react项目中使用的是antd的Input，要实现一个防抖的功能，但是遇到报错SyntheticEvent...，e.target为null。

事情的起因

最开始的时候被antd的Form组件文档中使用的Input的onChange(value)影响了，直接接收了value，后来找到Input的文档看到onChange(e)其实接收的是event。

替换成正确的event，依然报错，那这就有问题了啊，由于我是直接在方法外层使用的lodash的debounce，并没有在方法内自己再封装去抖的方法，可以看一下代码：

const onDiscountChange = debounce((e) => {
   e.persist(); // 即使设置了这个也无效。
   console.log(e.target.value,9);
   // ...dosomething
}, 500)

  return (
    <Form.Item 
      label="折扣码"
    >
      <Input 
        value={discountValidate.value} 
        placeholder='请输入折扣码'
        onChange={onDiscountChange}
      />
    </Form.Item>

解决的经过

现在我猜测很可能是debounce这层出了问题，尝试去掉试了下，果然，万事大吉。

可是我想去抖啊，要做一个节约资源，提升体验的前端工程师。欧耶！
那么问题来了，自己在内部手写一个去抖？想想还是算了。。。麻烦

于是开动脑筋，两个方法涌上心头

1. onChange事件直接把value传出去，就解决了因方法嵌套无法传递的问题

<Input 
    value={discountValidate.value} 
    placeholder='请输入折扣码'
    onChange={(e) => onDiscountChange(e.target.value)}
/>

2. onDiscountChange方法不做去抖，内部调用接口的方法单独封装一个方法debounceFoo(e.target.value), 将这个方法去抖就行了。

总结

使用debounce包装需要接口event的函数时，会拿不到正确的事件对象