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;