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 }); } 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(Object.assign({}, this.state, changedValue)); } } render() { const { size } = this.props; const state = this.state; return ( <span> <Input type="text" size={size} value={state.number} onChange={this.handleNumberChange} style={{ width: '65%', marginRight: '3%' }} /> <Select value={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 = Form.create()(Demo); export default WrappedDemo;
.