diff --git a/components/form/demo/customized-form-controls.md b/components/form/demo/customized-form-controls.md index db958afaa1..723639848c 100644 --- a/components/form/demo/customized-form-controls.md +++ b/components/form/demo/customized-form-controls.md @@ -19,44 +19,70 @@ Customized or third-party form controls can be used in Form, too. Controls must ````jsx -import { Form, Input, Button } from 'antd'; +import { Form, Input, Select, Button } from 'antd'; const FormItem = Form.Item; +const Option = Select.Option; -const CustomizedInputNumber = React.createClass({ +const PriceInput = React.createClass({ getInitialState() { + const value = this.props.value || {}; return { - value: this.props.value || 0, + number: value.number || 0, + currency: value.currency || 'rmb', }; }, componentWillReceiveProps(nextProps) { // Should be a controlled component. if ('value' in nextProps) { const value = nextProps.value; - this.setState({ value }); + this.setState(value); } }, - handleChange(e) { - const number = parseFloat(e.target.value || 0); + handleNumberChange(e) { + const number = parseInt(e.target.value || 0, 10); if (isNaN(number)) { return; } if (!('value' in this.props)) { - this.setState({ value: number }); + this.setState({ number }); } + this.triggerChange({ number }); + }, + handleCurrencyChange(currency) { + if (!('value' in this.props)) { + this.setState({ currency }); + } + this.triggerChange({ currency }); + }, + triggerChange(changedValue) { // Should provide an event to pass value to Form. const onChange = this.props.onChange; if (onChange) { - onChange(number); + onChange(Object.assign({}, this.state, changedValue)); } }, render() { + const { size } = this.props; + const state = this.state; return ( - + + + + ); }, }); @@ -70,14 +96,22 @@ const Demo = Form.create()(React.createClass({ } }); }, + checkPrice(rule, value, callback) { + if (value.number > 0) { + callback(); + return; + } + callback('Price must greater than zero!'); + }, render() { const { getFieldDecorator } = this.props.form; return (
- - {getFieldDecorator('number', { - rules: [{ type: 'number' }], - })()} + + {getFieldDecorator('price', { + initialValue: { number: 0, currency: 'rmb' }, + rules: [{ validator: this.checkPrice }], + })()} diff --git a/components/form/demo/register.md b/components/form/demo/register.md index bbcb8b0531..34b19f2241 100644 --- a/components/form/demo/register.md +++ b/components/form/demo/register.md @@ -183,6 +183,7 @@ const RegistrationForm = Form.create()(React.createClass({