You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.5 KiB
68 lines
1.5 KiB
5 years ago
|
---
|
||
|
|
order: 19
|
||
|
|
title:
|
||
|
|
zh-CN: 自行处理表单数据
|
||
|
|
en-US: Handle Form Data Manually
|
||
|
|
---
|
||
|
|
|
||
|
|
## zh-CN
|
||
|
|
|
||
|
|
`Form` 具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择自行处理数据。
|
||
|
|
|
||
|
|
## en-US
|
||
|
|
|
||
|
|
`Form` will collect and validate form data automatically. But if you don't need this feature or the default behavior cannot satisfy your business, you can handle form data manually.
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { Form, InputNumber } from 'antd';
|
||
|
|
|
||
|
|
function validatePrimeNumber(number) {
|
||
|
|
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 RawForm = () => {
|
||
|
|
const [number, setNumber] = React.useState({
|
||
|
|
value: 11,
|
||
|
|
});
|
||
|
|
|
||
|
|
const tips =
|
||
|
|
'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
|
||
|
|
|
||
|
|
const onNumberChange = value => {
|
||
|
|
setNumber({
|
||
|
|
...validatePrimeNumber(value),
|
||
|
|
value,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Form>
|
||
|
|
<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>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
ReactDOM.render(<RawForm />, mountNode);
|
||
|
|
```
|