ant

ant

1.自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：

（1）提供受控属性 value 或其它与 valuePropName 的值同名的属性。

（2）提供 onChange 事件或 trigger 的值同名的事件。

（3）不能是函数式组件。

2.创建组件

components/PriceInput/index.js

import React, { PureComponent } from 'react';
import { Input, Select } from 'antd';const Option = Select.Option;export default class PriceInput extends PureComponent {constructor(props) {super(props);const value = props.value || {};this.state = {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);}}handleNumberChange = (e) => {const number = parseInt(e.target.value || 0, 10);if (isNaN(number)) {return;}if (!('value' in this.props)) {this.setState({ number });}iggerChange({ number });}handleCurrencyChange = (currency) => {if (!('value' in this.props)) {this.setState({ currency });}iggerChange({ currency });}triggerChange = (changedValue) => {// Should provide an event to pass value st onChange = Change;if (onChange) {onChange(Object.assign({}, this.state, changedValue));}}render() {const { size } = this.props;const state = this.state;return (<span><Inputtype="text"size={size}value={state.number}onChange={this.handleNumberChange}style={{ width: '65%', marginRight: '3%' }}/><Selectvalue={state.currency}size={size}style={{ width: '32%' }}onChange={this.handleCurrencyChange}><Option value="rmb">RMB</Option><Option value="dollar">Dollar</Option></Select></span>);}
}

3.调用

import React, { PureComponent } from 'react';
import { Form, Button } from 'antd';const FormItem = Form.Item;class Demo extends PureComponent {handleSubmit = (e) => {e.preventDefault();this.props.form.validateFields((err, values) => {if (!err) {console.log('Received values of form: ', values);}});}checkPrice = (rule, value, callback) => {if (value.number > 0) {callback();return;}callback('Price must greater than zero!');}render() {const { getFieldDecorator } = this.props.form;return (<Form layout="inline" onSubmit={this.handleSubmit}><FormItem label="Price">{getFieldDecorator('price', {initialValue: { number: 0, currency: 'rmb' },rules: [{ validator: this.checkPrice }],})(<PriceInput />)}</FormItem><FormItem><Button type="primary" htmlType="submit">Submit</Button></FormItem></Form>);}
}const WrappedDemo = ate()(Demo);export default WrappedDemo;

.