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

2023年5月12日10:09:55
    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>
    }
}

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

  • 作者:OlyLis
  • 原文链接:https://blog.csdn.net/lister1005/article/details/93345297
    更新时间:2023年5月12日10:09:55 ,共 1175 字。