import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';
class DecimalCompareForm extends React.Component {
formRef = React.createRef();
handleSubmit = () => {
this.formRef.current?.validateFields()
.then(values => console.log('提交成功:', values))
.catch(error => console.error('校验失败:', error));
};
render() {
return (
<Form ref={this.formRef}>
<Form.Item
label="数值 A"
name="valueA"
rules={[
{ required: true, message: '必填' },
{ pattern: /^\d+(\.\d+)?$/, message: '必须为数字' },
({ getFieldValue }) => ({
validator(_, value) {
const valueB = getFieldValue('valueB');
if (value && valueB && parseFloat(value) > parseFloat(valueB)) {
return Promise.reject('A 不能大于 B');
}
return Promise.resolve();
},
}),
]}
>
<Input
placeholder="请输入数值 A"
onChange={() => {
// 修改B输入框后,同步触发A的验证
this.formRef.current?.validateFields(['valueA']);
this.formRef.current?.validateFields(['valueB']);
}}
/>
</Form.Item>
<Form.Item
label="数值 B"
name="valueB"
rules={[
{ required: true, message: '必填' },
{ pattern: /^\d+(\.\d+)?$/, message: '必须为数字' },
({ getFieldValue }) => ({
validator(_, value) {
const valueA = getFieldValue('valueA');
if (value && valueA && parseFloat(value) < parseFloat(valueA)) {
return Promise.reject('B 不能小于 A');
}
return Promise.resolve();
},
}),
]}
>
<Input
placeholder="请输入数值 B"
onChange={() => {
// 修改B输入框后,同步触发A的验证
this.formRef.current?.validateFields(['valueA']);
this.formRef.current?.validateFields(['valueB']);
}}
/>
</Form.Item>
<Button type="primary" onClick={this.handleSubmit}>
提交
</Button>
</Form>
);
}
}
export default DecimalCompareForm;
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。