Antd的Form.Item自定义类型输入框

首页 / 新闻资讯 / 正文

    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>     } }

随便写了几个,大概这个意思