Antd中InputNumber元件數字限制小數位數

貓切發表於2017-05-15
元件

InputNumber元件強制限制小數，可以使用 formatter 屬性配合正則來實現，但在實踐中發現一個問題，比如限制的兩位小數，當我輸第三位小數的時候，元件會儲存這個值，導致傳給後臺的值多出一位小數。

在2.9.0之後，InputNumber 新增 parser 屬性, 搭配 formatter 一起使用，可以較好的限制小數的位數。

將formatter和parser屬性都繫結同一個方法，在這個方法裡實現：

......

<InputNumber min={0}
             max={100}
             step={0.01}
             formatter={limitDecimals}
             parser={limitDecimals} />

繫結方法：

const limitDecimals = (value: string | number): string => {
    const reg = /^(-)*(d+).(dd).*$/;
    console.log(value);
    if(typeof value === `string`) {
        return !isNaN(Number(value)) ? value.replace(reg, `$1$2.$3`) : ``
    } else if (typeof value === `number`) {
        return !isNaN(value) ? String(value).replace(reg, `$1$2.$3`) : ``
    } else {
        return ``
    }
};

相關文章