前言：當(dāng)我們在使用react + antd design的InputNumber時發(fā)現(xiàn)這個組件可以輸入正號和負號掐禁，在一些需求中不希望出現(xiàn)負號，該如何處理，下面列出一些常見的解決思路。
- 通過Form的rule正則表達式校驗負號憎乙，當(dāng)鍵入負號時加以提示。
解析：
<Form form={form}>
<Item name='abc' label='測試' rules={[{ pattern: /-/g, message: '不能輸入負號' }]}>
<Input />
</Item>
</Form>
- 當(dāng)用戶鍵入負號時使用replace直接將其置為空叉趣。
解析：當(dāng)鍵入正號和負號時Item上面的getValueFromEvent和InputNumber上的屬性formatter和parser都不會觸發(fā)
問題一：當(dāng)使用Item上面的getValueFromEvent屬性時鍵入+-號時打印的value將會是null
<Form form={form}>
<Item name='abc' label='測試' getValueFromEvent={(e) => {
console.log(e);
}}>
<InputNumber type='number' />
</Item>
</Form>
image.png
問題二：當(dāng)使用InputNumber上的屬性formatter和parser時,打印的value將會是空
<Form form={form}>
<Item name='abc' label='測試'>
<InputNumber formatter={(e) => {
console.log(e)
return `${e}`
}} type='number' />
</Item>
</Form>
image.png
因為在上面這三個時機內(nèi)都不能夠使用replace將負號置為空泞边。
- 阻止鍵入
解析：當(dāng)輸入負號時阻止鍵入
import React from 'react';
import { InputNumber } from 'antd';
const InputNumberNoNegative = () => {
const handleKeyDown = (e: any) => {
console.log('handleKeyDown', e);
// 阻止'-'鍵的默認行為
if (e.key === '-') {
e.preventDefault();
}
// 或者使用keyCode -的keyCode是189
if (e.keyCode === 189) {
e.preventDefault();
}
// 推薦使用e.key判斷這樣能夠明確的看到想干啥
};
return (
<InputNumber
min={0}
onKeyDown={handleKeyDown}
style={{ width: 120 }}
placeholder="請輸入數(shù)字"
/>
);
};
export default InputNumberNoNegative;
這樣當(dāng)我們鍵入-號時會發(fā)現(xiàn)輸入框里面始終不會出現(xiàn)該負號。
