mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
b9a6b7b578
* demo: update demo * add form * clear * add Select * add * fix style * fix style * fix * revert
61 lines
1.3 KiB
TypeScript
61 lines
1.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Form, InputNumber } from 'antd';
|
|
|
|
type ValidateStatus = Parameters<typeof Form.Item>[0]['validateStatus'];
|
|
|
|
const validatePrimeNumber = (
|
|
number: number,
|
|
): {
|
|
validateStatus: ValidateStatus;
|
|
errorMsg: string | null;
|
|
} => {
|
|
if (number === 11) {
|
|
return {
|
|
validateStatus: 'success',
|
|
errorMsg: null,
|
|
};
|
|
}
|
|
return {
|
|
validateStatus: 'error',
|
|
errorMsg: 'The prime between 8 and 12 is 11!',
|
|
};
|
|
};
|
|
|
|
const formItemLayout = {
|
|
labelCol: { span: 7 },
|
|
wrapperCol: { span: 12 },
|
|
};
|
|
|
|
const tips =
|
|
'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
|
|
|
|
const App: React.FC = () => {
|
|
const [number, setNumber] = useState<{
|
|
value: number;
|
|
validateStatus?: ValidateStatus;
|
|
errorMsg?: string | null;
|
|
}>({ value: 11 });
|
|
|
|
const onNumberChange = (value: number) => {
|
|
setNumber({
|
|
...validatePrimeNumber(value),
|
|
value,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Form style={{ maxWidth: 600 }}>
|
|
<Form.Item
|
|
{...formItemLayout}
|
|
label="Prime between 8 & 12"
|
|
validateStatus={number.validateStatus}
|
|
help={number.errorMsg || tips}
|
|
>
|
|
<InputNumber min={8} max={12} value={number.value} onChange={onNumberChange} />
|
|
</Form.Item>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export default App;
|