react引用antd-form组件

曾经终败给现在 2022-07-12 11:14 267阅读 0赞

const AddMaintainPerson = Form.create()(React.createClass({
        getInitialState() {
            return {
                passwordDirty: false };
        },
        /** * 表单提交的内容 * @param e */ handleSubmit(e) {
            e.preventDefault();
            this.props.form.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    console.log(values);
                    console.log('Received values of form: ', values);
                    var managerJson={
                        "phone": values.phone,
                        "email": values.email,
                        "username": values.username,
                        "password": values.password,
                        "role":values.role };
                    const {
       dispatch} = this.props;
                    dispatch(fetchAddMaintain('token',managerJson));
                    //提交成功之后清空数据 this.props.form.resetFields();
                }
            });
        },
        /** * 获取密码框中鼠标的焦点 * @param e */ handlePasswordBlur(e) {
            const value = e.target.value;
            this.setState({ passwordDirty: this.state.passwordDirty || !!value });
        },
        /** * 验证两次输入的密码 * @param rule * @param value * @param callback */ checkPassword(rule, value, callback) {
            const form = this.props.form;
            if (value && value !== form.getFieldValue('password')) {
                callback('两次密码输入不一致！');
            } else {
                callback();
            }
        },
        /** * 验证密码是否为空 * @param rule * @param value * @param callback */ checkConfirm(rule, value, callback) {
            const form = this.props.form;
            if (value && this.state.passwordDirty) {
                form.validateFields(['confirm'], { force: true });
            }
            callback();
        },
        render() {
            const { getFieldDecorator } = this.props.form;
            //设置加载formItemLayout（输入框，单选按钮，多选框，进度条）的样式 const formItemLayout = {
                labelCol: { span: 6 },
                wrapperCol: { span: 9 }
            };
            //设置加载tailFormItemLayout（提交按钮）的样式 const tailFormItemLayout = {
                wrapperCol: {
                    span: 14,
                    offset: 7 }
            };
            //defaultValue={['唱歌']} 设置多选框的默认值 return (
                <div className="body_div">
                    <div className='module_header'>
                        <div className='title'>
                            添加人员
                        </div>
                    </div>
                    <div className='module_content' style={
       {
       width:'70%'}}>
                        <Form onSubmit={
       this.handleSubmit}>
                            <FormItem {...formItemLayout}
                                label="手机号" >
                                {
       getFieldDecorator('phone', {
                                    rules: [{
                                        required: true, message: '请输入您的手机号!' }]
                                })(
                                    <Input className="content_style" addonBefore={<Icon type="mobile" />} />
                                )}
                            </FormItem>
                            <FormItem {...formItemLayout}
                                label="邮箱" hasFeedback
                            >
                                {
       getFieldDecorator('email', {
                                    rules: [{
                                        type: 'email', message: '输入邮箱的类型错误' }, {
                                        required: true, message: '请输入您的邮箱' }]
                                })(
                                    <Input className="content_style" addonBefore={<Icon type="mail" />} />
                                )}
                            </FormItem>
                            <FormItem {...formItemLayout}
                                label="账号" >
                                {
       getFieldDecorator('username', {
                                    rules: [{ required: true, message: '请输入您的账号' }]
                                })(
                                    <Input className="content_style" addonBefore={<Icon type="user" />} />
                                )}
                            </FormItem>
                            <FormItem {...formItemLayout}
                                label="密码" hasFeedback
                            >
                                {
       getFieldDecorator('password', {
                                    rules: [{
                                        required: true, message: '请输入您的密码' }, {
                                        validator: this.checkConfirm
                                    }]
                                })(
                                    <Input className="content_style" addonBefore={<Icon type="lock" />} type="password" onBlur={
       this.handlePasswordBlur} />
                                )}
                            </FormItem>
                            <FormItem {...formItemLayout}
                                label="确认密码" hasFeedback
                            >
                                {
       getFieldDecorator('confirm', {
                                    rules: [{
                                        required: true, message: '请在次输入您的密码' }, {
                                        validator: this.checkPassword
                                    }]
                                })(
                                    <Input className="content_style" addonBefore={<Icon type="lock" />} type="password" />
                                )}
                            </FormItem>
                            <FormItem {...formItemLayout}
                                label="权限" >
                                {
       getFieldDecorator('role',{
                                    rules: [{ required: true, message: '请选择您的权限' }]
                                })(
                                    <RadioGroup className="content_style">
                                        <Radio value="上传">上传</Radio>
                                        <Radio value="审核">审核</Radio>
                                        <Radio value="审核查询">审核查询</Radio>
                                        <Radio value="统计查询">统计查询</Radio>
                                    </RadioGroup>
                                )}
                            </FormItem>
                            <FormItem {...tailFormItemLayout}>
                                <Button type="primary" htmlType="submit" size="large">提交</Button>
                            </FormItem>
                        </Form>
                    </div>
                </div>
            );
        }
    }));

发表评论取消回复

表情：

评论列表（有 0 条评论，267人围观）

还没有评论，来说两句吧...

相关阅读

相关 react组件通讯

React 的组件可以定义为 class 或函数的形式函数组件 <script type="text/babel"> function HelloM

Dear 丶/ 2023年01月13日 01:51/ 0 赞/ 192 阅读

相关 React 组件更新优化

文章目录 1. PureComponent 2. shouldComponentUpdate 2.1 forceUpdate 2.2

「爱情、让人受尽委屈。」/ 2022年12月29日 09:17/ 0 赞/ 184 阅读

相关 Vue组件相关引用

Vue组件可以理解为将多个小的东西封装成一个大的东西，然后可以直接对大的东西来进行操作，组件的核心是`VirtualDOM`（虚拟DOM）组件在注册也分为全局组件与

快来打我*/ 2022年12月13日 12:45/ 0 赞/ 154 阅读

相关 react组件通信

一、状态机setState是一个异步操作 setState用来修改state中的初始状态，但是它异步操作，不能在setState之后马上获取到最新的数据。可以使用setS

末蓝、/ 2022年12月05日 10:20/ 0 赞/ 154 阅读

相关 react引用antd-form组件

const AddMaintainPerson = Form.create()(React.createClass({ getInitialState(

曾经终败给现在/ 2022年07月12日 11:14/ 0 赞/ 268 阅读

相关 React组件API

虚拟DOM React之所以快，是因为它不直接操作DOM。React将DOM结构存储在内存中，然后同render()的返回内容进行比较，计算出需要改动的地方，最后才反映到

悠悠/ 2022年06月16日 13:09/ 0 赞/ 124 阅读

相关 react-native组件ScrollView

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_Re

阳光穿透心脏的1/2处/ 2022年05月24日 06:26/ 0 赞/ 178 阅读

相关 react篇章-React 组件-复合组件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鸟教程 R

叁歲伎倆/ 2021年12月24日 15:33/ 0 赞/ 284 阅读

相关 React 组件引用本地图片问题

es6不支持在<img />标签内直接写图片的路径，即： <img src="../images/photo.png"/> 这种格式是不支持的。在网上看了很多博客，总结

╰+攻爆jí腚メ/ 2021年09月15日 22:34/ 0 赞/ 347 阅读

相关 mpvue 组件引用

在list.vue中引用list-tenplatv.vue模板 ![20190916144849293.png][] list-tenplatv.vue模板页

朴灿烈づ我的快乐病毒、/ 2021年07月24日 23:35/ 0 赞/ 342 阅读