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

最新推荐文章于 2024-08-22 19:25:50 发布

OlyLis

最新推荐文章于 2024-08-22 19:25:50 发布

阅读量8.9k

点赞数

本文链接：https://blog.csdn.net/lister1005/article/details/93345297

版权

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

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