docs: add demo for without Form.create, ref: #3594

This commit is contained in:
Benjy Cui 2016-11-02 11:24:52 +08:00
parent 20bbf43ccd
commit 7372893b8e
4 changed files with 78 additions and 3 deletions

View File

@ -1,5 +1,5 @@
---
order: 9
order: 10
title:
zh-CN: 表单组合
en-US: Mix

View File

@ -1,5 +1,5 @@
---
order: 11
order: 12
title:
zh-CN: 校验其他组件
en-US: Other Form Controls

View File

@ -1,5 +1,5 @@
---
order: 10
order: 11
title:
zh-CN: 校验提示
en-US: Validation message

View File

@ -0,0 +1,75 @@
---
order: 9
title:
zh-CN: 自行处理表单数据
en-US: Handle Form Data Manually
---
## zh-CN
使用 `Form.create` 处理后的表单具有自动收集数据并校验的功能,但如果您不需要这个功能,或者默认的行为无法满足业务需求,可以选择不使用 `Form.create` 并自行处理数据。
## en-US
`Form.create` will collect and validate form data automatically. But if you don't need this feature or the default behaviour cannot satisfy you business, you can drop `Form.create` and handle form data manually.
````jsx
import { Form, InputNumber } from 'antd';
const FormItem = Form.Item;
const RawForm = React.createClass({
getInitialState() {
return {
number: {
value: 11,
},
};
},
handleNumberChange(value) {
this.setState({
number: {
...this.validatePrimeNumber(value),
value,
},
});
},
validatePrimeNumber(number) {
if (number === 11) {
return {
validateStatus: 'success',
errorMsg: null,
};
}
return {
validateStatus: 'error',
errorMsg: 'The prime number between 8 to 12 is 11!',
};
},
render() {
const formItemLayout = {
labelCol: { span: 8 },
wrapperCol: { span: 12 },
};
const number = this.state.number;
return (
<Form horizontal>
<FormItem
{...formItemLayout}
label="Prime num between 8 & 12"
validateStatus={number.validateStatus}
help={number.errorMsg}
>
<InputNumber
min={8}
max={12}
value={number.value}
onChange={this.handleNumberChange}
/>
</FormItem>
</Form>
);
},
});
ReactDOM.render(<RawForm />, mountNode);
````