Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/新增非法输入警告 #409

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Feature/新增非法输入警告 #409

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9047c91
对超过界限值以及非数字对输入进行警告
Apr 13, 2022
3c99ba8
修改lint报错
Apr 13, 2022
57b329b
去除变红边框，非法数据共享out-of-range状态
Apr 13, 2022
cca1946
对字符-进行特殊判断
Apr 21, 2022
a72c815
简化代码
Apr 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion src/InputNumber.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,8 @@ const InputNumber = React.forwardRef(

const [focus, setFocus] = React.useState(false);

const [illegalData, setIllegalData] = React.useState(false);

const userTypingRef = React.useRef(false);
const compositionRef = React.useRef(false);

Expand Down Expand Up @@ -399,8 +401,17 @@ const InputNumber = React.forwardRef(
collectInputValue(inputRef.current.value);
};

const judgeData = (inputNumberValue: string) => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

感觉这个方法跟 isInvalidate isInRange 是重复的

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌，我下午再更改一下提上来。

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isInvalidate的作用是判断是否为空或者判断该值是否是一个数字，isInRange的作用是判断输入值是否在区间范围内，貌似可以用这两个方法结合起来去取代judgeData；
但这两个方法是decimalValue的静态方法，在用户输入的时候，decimalValue拿不到最新的值，比如原本输入框是5，我再输入一个5，在input的onChange事件中，decimalValue的拿到的值是5而不是55，这一点你觉得有什么比较好的解决方法吗？

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

可以用 inputValue，那个是实时的。

if(isNaN(Number(inputNumberValue)) || (max && inputNumberValue > max) || (min && inputNumberValue < min)){
return true
}else{
return false
}
}

// >>> Input
const onInternalInput: React.ChangeEventHandler<HTMLInputElement> = (e) => {
setIllegalData(judgeData(e.target.value))
collectInputValue(e.target.value);
};

Expand Down Expand Up @@ -487,6 +498,8 @@ const InputNumber = React.forwardRef(
// >>> Focus & Blur
const onBlur = () => {
flushInputValue(false);

setIllegalData(false)

setFocus(false);

Expand Down Expand Up @@ -531,7 +544,7 @@ const InputNumber = React.forwardRef(
[`${prefixCls}-disabled`]: disabled,
[`${prefixCls}-readonly`]: readOnly,
[`${prefixCls}-not-a-number`]: decimalValue.isNaN(),
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

非数字其实应该在此处判断，更符合语义，不过这个 css 类名没写样式。需要在 assets\index.less L19 加上 &-not-a-number

[`${prefixCls}-out-of-range`]: !decimalValue.isInvalidate() && !isInRange(decimalValue),
[`${prefixCls}-out-of-range`]: (!decimalValue.isInvalidate() && !isInRange(decimalValue)) || illegalData,
})}
style={style}
onFocus={() => {
Expand Down