antd InputNumber: 执行函数 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的状态，我想在值完全更改后执行此操作，而不是在每次按键时执行的 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>

antd InputNumber: 执行函数 onChangeComplete 而不是 onChange

antd InputNumber: execute function onChangeComplete instead of onChange

javascript

reactjs

event-handling

antd