how can Input in antd restrict users to enter only numbers, including the decimal point
how can Input in antd restrict users to enter only numbers, including the decimal point
is not directly replaced with InputNumber
isn't this an official example? let me help you copy a react version of the code. Come here:
import { Input, Tooltip } from 'antd';
function formatNumber(value) {
value += '';
const list = value.split('.');
const prefix = list[0].charAt(0) === '-' ? '-' : '';
let num = prefix ? list[0].slice(1) : list[0];
let result = '';
while (num.length > 3) {
result = `,${num.slice(-3)}${result}`;
num = num.slice(0, num.length - 3);
}
if (num) {
result = num + result;
}
return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
}
class NumericInput extends React.Component {
onChange = (e) => {
const { value } = e.target;
const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
if ((!Number.isNaN(value) && reg.test(value)) || value === '' || value === '-') {
this.props.onChange(value);
}
}
// '.' at the end or only '-' in the input box.
onBlur = () => {
const { value, onBlur, onChange } = this.props;
if (value.charAt(value.length - 1) === '.' || value === '-') {
onChange({ value: value.slice(0, -1) });
}
if (onBlur) {
onBlur();
}
}
render() {
const { value } = this.props;
const title = value ? (
<span className="numeric-input-title">
{value !== '-' ? formatNumber(value) : '-'}
</span>
) : 'Input a number';
return (
<Tooltip
trigger={['focus']}
title={title}
placement="topLeft"
overlayClassName="numeric-input"
>
<Input
{...this.props}
onChange={this.onChange}
onBlur={this.onBlur}
placeholder="Input a number"
maxLength="25"
/>
</Tooltip>
);
}
}
class NumericInputDemo extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
}
onChange = (value) => {
this.setState({ value });
}
render() {
return <NumericInput style={{ width: 120 }} value={this.state.value} onChange={this.onChange} />;
}
}
ReactDOM.render(<NumericInputDemo />, mountNode);
I know the answer. Add value.replace (/ [^\ -?\ d] / gjime')
to the onChange
in using ant design mobile, you need to use the kind of Select component in antd, but it is not in ant design mobile. What should I do ...
my aim is to ban the date before today and the date after 7 days, that is, I can only choose the time in the next seven days. My code can only be banned after seven days. How can I get rid of the date before today? ...
form verification needs to send a request to the background for uniqueness verification and real-time verification. the current solution is to send a request in the onBlur of input. but the experience is not good. Every time onBlur, the page will fl...
due to the need to add printing function, that is, to bring up the printer s pop-up window interface, it just so happens that the form uses the antd table, and I find that no matter which node I put the id of printTable on, I will not align the form ...
Table adds rowSelection attribute. As long as setState selectedRowKeys is checked, it cannot be checked. There is no response when clicking on it. I do not know whether it is the bug; of antd itself . antd version: 3.10.0 onSelectChange = (selectedRow...