The React project uses antD Input to implement an anti-shock function, but an error occursSyntheticEvent....e.targetfornull.

Cause of the matter

At the very beginningantdtheFormUsed in the component documentationInputtheonChange(value)Yes, I received it directlyvalueLater foundInputDocument to seeonChange(e)It’s actually receivingevent.

Replace it with the correct oneeventI’m using the method directly in the outer layerlodashthedebounceThere is no way to encapsulate the buffering method in the method itself, you can see the code:

const onDiscountChange = debounce((e) = > {
   e.persist(); // Even if this is set, it does not work.
   console.log(e.target.value,9);
   / /... dosomething
}, 500)

  return (
    <Form.Item 
      label="Discount code"
    >
      <Input 
        value={discountValidate.value} 
        placeholder='Please enter the discount code'
        onChange={onDiscountChange}
      />
    </Form.Item>
Copy the code

Settlement process

Now I thought it was Debounce and tried to get rid of it. Sure enough, everything was fine.

But I want to shake ah, to save resources, improve the experience of the front end engineer. Oh yeah! So the question is, do you hand write one internally? Think about it… trouble

Then start thinking, two methods come to mind

  1. The onChange event directly passes out the value, which solves the problem of nested methods that cannot be passed
<Input 
    value={discountValidate.value} 
    placeholder='Please enter the discount code'
    onChange={(e) = > onDiscountChange(e.target.value)}
/>
Copy the code
  1. The onDiscountChange method does not shake, the internal call interface method encapsulates a separate methoddebounceFoo(e.target.value), this method to shake it off.

conclusion

Interfaces are required to use debounce packagingeventThe correct event object cannot be retrieved from the function