rc-form的表单实践

安装依赖

antd-mobile可能需要加配置

npm i react antd-mobile rc-form -S

import React, { Component } from 'react'
import { InputItem } from 'antd-mobile';
import { createForm } from 'rc-form';

import './userMsgEdit.scss'
class Replacephone extends Component {
    state = {
        autoCompleteResult: [],
        getCaptchaMsg: '获取验证码',
        getCaptchaTime: 60,
        getCaptchaBtn: false,
        captcha: ""
    };
    onsubmit = () => {
        this.props.form.validateFields((error, values) => {
            if (error) return error;
            console.log(values);
        });
    }
    //获取验证码
    getCaptcha = e => {
        let that = this;
        that.setState({
            getCaptchaBtn: true,
        });
        if (!that.state.getCaptchaBtn) {
            let timeIn = setInterval(() => {
                that.state.getCaptchaTime--;
                that.setState({
                    getCaptchaTime: that.state.getCaptchaTime,
                    getCaptchaMsg: '重新获取 ' + that.state.getCaptchaTime + " s",
                });
                if (that.state.getCaptchaTime === 0) {
                    clearInterval(timeIn);
                    that.setState({
                        getCaptchaTime: 60,
                        getCaptchaMsg: '重新获取',
                        getCaptchaBtn: false,
                    });
                }
            }, 1000);
        }
    };
    render() {
        const { getFieldDecorator, getFieldError } = this.props.form;
        return (
            <div className='userMsgEditWrap'>
                <h1 className='msgTitle'>更换手机号</h1>
                <div className='formBox'>
                    {getFieldDecorator('password', {
                        rules: [
                            { required: true, message: '请输入安全密码!' },
                        ],
                    })(
                        <div>
                            <InputItem
                                type="password"
                                placeholder="请输入安全密码"
                            ></InputItem>
                            <div className='errBox'>
                                {(getFieldError('password') || []).join(',')}
                            </div>
                        </div>
                    )}
                    {getFieldDecorator('userName', {
                        rules: [
                            { required: true, message: '输入要绑定的新手机号!' },
                            // { pattern: /^1[345789]\d{9}$/, message: '手机格式输入不正确!' },
                        ],
                    })(
                        <div>
                            <InputItem
                                type="phone"
                                placeholder="输入要绑定的新手机号"
                                maxLength={13}
                                clear
                            ></InputItem>
                            <div className='errBox'>
                                {(getFieldError('userName') || []).join(',')}
                            </div>
                        </div>
                    )}
                    {getFieldDecorator('Code', {
                        rules: [
                            { required: true, message: '请输入验证码!' },
                        ],
                    })(
                        <div>
                            <InputItem
                                type="number"
                                placeholder="短信验证码"
                                extra={<div disabled={this.state.getCaptchaBtn}
                                    onClick={this.getCaptcha} className='code'>{/* 获取验证码 */}{this.state.getCaptchaMsg}</div>
                                }
                            ></InputItem>
                            <div className='errBox'>
                                {(getFieldError('Code') || []).join(',')}
                            </div>
                        </div>
                    )}

                </div>
                <div className='submitBtn' onClick={this.onsubmit} >确定</div>
                <div className='goLogin' onClick={() => { this.props.history.push('/mime/resetpassword') }}>忘记密码？</div>
            </div>
        )
    }
}

export default createForm()(Replacephone);

userMsgEdit.scss

.userMsgEditWrap {
    max-width: 640*1px/2;
    margin: 0 auto;
    padding: 113*100vw/750 1.5% 0 1.5%;
    height: calc(100vh - 45px);
    box-sizing: border-box;
    position: relative;
    .msgTitle {
        font-size: 20px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        text-align: center;
    }
    .formBox {
        margin-top: 54px;
        .code {
            font-size: 14px;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: rgba(255, 197, 62, 1);
        }
        .errBox {
            color: red;
            font-size: 13px;
            padding-top: 4px
        }
    }
    .submitBtn {
        background: linear-gradient(48deg, rgba(255, 182, 25, 1), rgba(255, 207, 88, 1));
        box-shadow: 0px 6px 12px 0px rgba(255, 213, 15, 0.23);
        opacity: 0.94;
        border-radius: 44px;
        text-align: center;
        padding: 15px 0;
        font-size: 15px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        margin-top: 59*100vw/750;
    }
    .goLogin {
        margin-top: 22.5px;
        font-size: 15px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(255, 197, 62, 1);
        text-align: center;
    }
    .agreementWrap {
        width: 100%;
        position: absolute;
        bottom: 73*100vw/750;
        left: 0;
        text-align: center;
        h6 {
            font-size: 12px;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
            line-height: 20px;
        }
        div {
            font-size: 12px;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: #FFC53E;
            line-height: 20px;
        }
    }
    .am-list-item {
        padding-left: 0;
        height: 57px;
        // .am-input-control{
        //     padding-left: 15px;
        // }
    }
}