antd InputNumber: 执行 function onChangeComplete 而不是 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>

在上面的代码中你可以看到我正在强制更新 currentAccountArray 的 state，我想在值完全改变后执行它而不是 onChange，它在每次按键时执行......

有什么办法可以做到这一点？ 我不想使用 onEnterPressed。

Answer 1

也许使用 onInput 而不是 onChange？ -- 或者 -- 也许一个延迟调用包裹在一个闭包中？

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>