Fix input clean error

This commit is contained in:
2022-03-07 20:29:42 +08:00
parent f3ba3b6150
commit 0e1aa51d4b
4 changed files with 45 additions and 17 deletions
+9 -4
View File
@@ -1,9 +1,12 @@
@import "../Theme/Theme.scss";
$line-min-height: 24px;
$root-min-height: 26px;
div.attr-input {
width: 100%;
display: flex;
min-height: 24px;
min-height: $line-min-height;
padding: 5px 0;
div.input-intro {
@@ -20,6 +23,7 @@ div.attr-input {
width: 50%;
height: 100%;
max-width: 180px;
min-height: $root-min-height;
div.input-content {
box-sizing: border-box;
@@ -29,13 +33,14 @@ div.attr-input {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
min-height: $root-min-height;
input {
width: 100%;
height: 100%;
border: none;
outline:none;
min-height: $line-min-height;
};
input:focus {
@@ -43,7 +48,7 @@ div.attr-input {
}
div.button-left, div.button-right {
min-height: 24px;
min-height: $line-min-height;
height: 100%;
display: flex;
justify-content: center;
@@ -66,7 +71,7 @@ div.attr-input {
div.err-message {
color: $lt-red;
padding-top: 5px;
min-height: 24px;
min-height: $line-min-height;
}
}
}
+15 -6
View File
@@ -55,6 +55,10 @@ class AttrInput extends Component<IAttrInputProps> {
private handelValueChange = () => {
if (!this.error && this.props.valueChange) {
if (this.props.isNumber) {
let numberVal = (this.value as any) * 10000;
this.value = (Math.round(numberVal) / 10000).toString();
}
this.props.valueChange(this.value);
}
this.forceUpdate();
@@ -122,13 +126,18 @@ class AttrInput extends Component<IAttrInputProps> {
</>
}
public render(): ReactNode {
public shouldComponentUpdate(nextProps: IAttrInputProps) {
this.updateValueFromProps(nextProps.value);
return true;
}
if (!this.error) {
const value = this.props.value ?? (this.props.isNumber ? "0" : "");
this.value = value.toString();
this.error = this.check(value.toString());
}
private updateValueFromProps(val: IAttrInputProps["value"]) {
const value = val ?? (this.props.isNumber ? "0" : "");
this.value = value.toString();
this.error = this.check(value.toString());
}
public render(): ReactNode {
return <Theme
className="attr-input"