AntDesign validation Typography editable text - regex

Question

I'm trying to validate when the user is typing in the Antd Design Text, so that it does not let him write other value than numbers and onchange does not return anything.
"antd": "^4.3.3",
"react": "^16.13.1"
import React from "react";
import { Typography } from "antd";
const { Text } = Typography;
export default class Demo extends React.Component {
state = {
price: 0,
};
onChange = (price) => {
let isValid= validatePriceRegex(price);
console.log(isValid, "Price:", price);
this.setState({ price});
};
handleChange = (e) => {
// In this part, I want to validate the input when the user is typing the value
console.log(e); // dont return anything
};
render() {
return (
<Text
onChange={this.handleChange}
editable={{ onChange: this.onChange }}
>
{this.state.price.toString()}
</Text>
);
}
}
const validatePriceRegex = (price) => {
const regex = /^\$?\d+(,\d{3})*(\.\d*)?$/;
return price && regex.test(price);
};

Answer 1

you seems to have 2 handle on change function. the handleChange and the handleChange
editable Text component only accepts onChange inside of the editable props, so you have to do in the same on change function
import React from "react";
import { Typography } from "antd";
const { Text } = Typography;
export default class Demo extends React.Component {
state = {
price: 0
};
onChange = price => {
let isValid = validatePriceRegex(price);
console.log(isValid, "Price:", price);
// you validate here
if (isValid) {
this.setState({ price });
}
};
// handleChange = e => {
// // In this part, I want to validate the input when the user is typing the value
// console.log(e); // dont return anything
// };
render() {
return (
<Text editable={{ onChange: this.onChange }}>
{this.state.price.toString()}
</Text>
);
}
}
const validatePriceRegex = price => {
const regex = /^\$?\d+(,\d{3})*(\.\d*)?$/;
return price && regex.test(price);
};