antd InputNumber: execute function onChangeComplete instead of onChange

Question

<Form.Item
        label="Amount"
        name={[index, 'amount']}
      >
        <InputNumber
          style={{ width: '100%' }}
          min={1}
          // onChange={() => {
          //   const array = [...form.getFieldValue('bankAccount')]
          //   setCurrentAccountArray(array)
          // }}
        />
      </Form.Item>

in the code above you can see that I am forcefully updating the state of currentAccountArray, I want to execute this after the value is completely changed instead of onChange, which executes on every key press...

is there a way I can achieve this? I do not want to use onEnterPressed.

Answer 1

Maybe use onInput instead of onChange? -- OR -- Maybe a delayed call wrapped in a closure?

function setCurrentAccountArray(arr){
    // whatever your doing here
    console.log("hi", arr)
}

var TO_later;
function delayedCall(fn, arg, delay){
    clearTimeout(TO_later);
    TO_later = setTimeout((function(Vfn, Varg){
        return function(){
            Vfn(Varg);
        }
    })(fn, arg), delay);
}

<Form.Item
    label="Amount"
    name={[index, 'amount']}
>
<InputNumber
    style={{ width: '100%' }}
    min={1}
    onChange={() => {
        const array = [...form.getFieldValue('bankAccount')]
        delayedCall(setCurrentAccountArray, array, 300)
    }}
/>
</Form.Item>