react-ant design:form表单组件 登陆注册功能简版方案参考

登录注册使用form

步骤：

1引入：import { Form, Input, Button, Checkbox } from 'antd';

2：使用:

const onFinishFailed = errorInfo => {//错误的提示
    console.log('Failed:', errorInfo);
};
class Login extends React.Component{
    onFinish = values => {//成功的提示
        console.log('Success:', values);
        this.setState({
            name:values.username,
            password:values.password
        })
    };
}
 render(){
        return(
            <div>
                <div style={sectionStyle}>
                    {/* form */}
                    <div className="formBox">
                    form:{this.state.name}
                    password:{this.state.password}
                    <Form
                        {...layout}
                        name="basic"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish}
                        onFinishFailed={onFinishFailed}
                    >
                        <Form.Item
                            label="Username"
                            name="username"
                            rules={[{ required: true, message: '请输入用户名!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="Password"
                            name="password"
                            rules={[{ required: true, message: '请输入密码!' }]}
                        >
                            <Input.Password />
                        </Form.Item>
                        <Form.Item {...tailLayout}>
                            <Button type="primary" onClick={this.fnLogin} htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                    </div>
                </div>
            </div>
        )
    }

3：说明：

插件中提交表单是绑定在两个对象函数上的

成功后的：onFinish对象函数

失败后的：onFinishFailed对象函数

导致如果想要做业务逻辑一般都是在onfinish的上比如成功后储存和跳转

但是不能设置state：state不在class内

想要把密码用户名设置在state组件状态上要把原框架改成上面onFinish

既放在class创建组件内，并添加在onFinish内添加setState,注意setState要把onFinish的完成的values值是对象所以要结构出来分开设置不然会报错

这时候state设置就可完成并且能在点击后组件内做相关逻辑比如跳转

form:{this.state.name}//可以获取到state值了
password:{this.state.password}

也可以直接在onFinish内做跳转和相关逻辑了：此时onFinish属于组件内对象

代码：

import './login.less';
import React from 'react';
import Background from '../../img/bg.jpg'
import { Form, Input, Button, Checkbox, message } from 'antd';

const sectionStyle = {
    width: "100%",
    height: '93.2vh',
    backgroundImage: `url(${Background})` ,
    paddingTop:'26vh'
}
const layout = {
    // labelCol: { span: 4 },
    // wrapperCol: { span: 4 },
};
const tailLayout = {
    // wrapperCol: { offset: 0, span: 10 },
};
const onFinishFailed = errorInfo => {//错误的提示
    console.log('Failed:', errorInfo);
};
class Login extends React.Component{
    // formRef = React.createRef();
    constructor(props){
        super(props)
        this.state={
        }
    }
    LoginPass(){//验证并成功跳转
        console.log('验证中。。。',this.state.name,this.state.password)
        if(this.state.name!=='123'||this.state.password!=='123'){
           message.error('用户名或密码错误,请重新登录!')
            return
        }
        message.success('登录成功',0.7,()=>{
            this.props.history.push('/home')
        })
       
    }
    onFinish = values => {//成功的提示
        console.log('Success:', values);
        this.setState({
            name:values.username,
            password:values.password
        })
        this.LoginPass()
    };
    render(){
        return(
            <div>
                <div style={sectionStyle}>
                    {/* form */}
                    <div className="formBox">
                    {/* form:{this.state.name} */}
                    {/* password:{this.state.password} */}
                    <Form
                        {...layout}
                        name="basic"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish}
                        onFinishFailed={onFinishFailed}
                    >
                        <Form.Item
                            label="Username"
                            name="username"
                            rules={[{ required: true, message: '请输入用户名!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="Password"
                            name="password"
                            rules={[{ required: true, message: '请输入密码!' }]}
                        >
                            <Input.Password />
                        </Form.Item>
                        <Form.Item {...tailLayout}>
                            <Button type="primary" onClick={this.fnLogin} htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                    </div>
                </div>
            </div>
        )
    }
}
export default Login;