inputGenerator() { const { getFieldDecorator } = this.props.form; return function (name, type, { initialValue = '', rules = [], label = '' }) { let defaultValueInput = <Input placeholder="请输入"/>, defaultValueRules = [...rules]; switch (type) { case 'string': // 字符串 break; case 'int': // 整型 defaultValueRules.push({ message: '请输入数字', pattern: new RegExp("^[0-9]+$") }); break; case 'float': // 浮点型 defaultValueRules.push({ message: '请输入数字或小数点', pattern: new RegExp("^[0-9.]+$") }); break; case 'boolean': // 布尔类型 defaultValueInput = (<Select> <Select.Option value={ true }>TRUE</Select.Option> <Select.Option value={ false }>FALSE</Select.Option> </Select>); break; case 'time': // 时间类型 defaultValueInput = <TimePicker />; break; } const valueInput = getFieldDecorator(name, { rules: [ { required: true, message: `请输入${ label }!` }, ...defaultValueRules ], initialValue })( defaultValueInput ); return valueInput; } }
目的是可以根据输入类型返回对应的输入方式:一般输入框,选择菜单,时间选择器
import inputGenerator from 'utils'; Form.create() class MyComponent extends Component { render() { const genrator = inputGenerator.call(this); return { <From> <From.Item label='名字'> genrator('name', 'string'); </From.Item> <From.Item label='出生日期'> genrator('name', 'time'); </From.Item> <From.Item label='年龄'> genrator('name', 'int'); </From.Item> </From> } }
随便写了几个,大概这个意思