Ant Design表格

最新推荐文章于 2024-08-03 12:31:25 发布

小胡学前端

最新推荐文章于 2024-08-03 12:31:25 发布

阅读量919

点赞数

分类专栏： react表格文章标签： react.js javascript

本文链接：https://blog.csdn.net/qq_45657154/article/details/121219223

版权

react表格专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在React应用中使用AntDesign表格组件，并结合自定义验证码组件进行用户登录验证。通过Form.Item和Input组件创建登录表单，同时利用ref获取子组件的方法来刷新验证码。当登录失败时，调用子组件的刷新验证码方法，确保用户可以重新尝试验证。

摘要由CSDN通过智能技术生成

ant Design表格使用

react 类组件
import React, { Component, createRef } from "react";
import { Form, Input, Button, Row, Col, message } from "antd";
import { withRouter } from "react-router-dom";
// 导入封装好的验证码
import Caption from '@/components/Captcha'
// 导入需要的模型
import Model from '@/models/common'
class NormalLogin extends Component {
    // 因为父组件需要获取子组件主动传递过来的数据
    //构造函数
    constructor(props){
        super(props)
        this.ref_captcha = createRef()
    }
    // 初始化状态
    state ={
        key:'',
    }
  render() {
    return (
      <div>
        <Form
          {...layout}
          name="basic"
          initialValues={{
            remember: true,
          }}
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              {
                required: true,
                message: "请输入用户名!",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: "请输入密码!",
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="验证码"
          >
            <Row gutter={8}>
              <Col span={14}>
                <Form.Item
                  name="captcha"
                  noStyle
                  rules={[
                    {
                      required: true,
                      message: "请输入验证码!",
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={10}>
                {/* 放上验证码组件 */}
                <Caption height = '30' setkey = {this.setkey} ref={this.ref_captcha}/>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
  //   点击事件的返回值是一个对象values
  onFinish = (values) => {
    //   将state中的key属性赋值给values对象中的key属性
    values['key'] = this.state.key
    //需要在这里通过导入的axios发送请求
    Model.normalLogin(values).then((ret)=>{
        // 判断结果请求是否成功
        if(ret.errNo === 0){
            // 请求成功,成功之后跳转页面
            message.success(ret.message,1,()=>{
                this.props.history.push('/dashboard')
            })
        }else{
            // 请求失败
            message.error(ret.errText)
            // 调用子组件（验证码组件）刷新验证码
            this.ref_captcha.current.getMessage()
        }
    })
  };

  onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

//   用于传递给子组件，获取子返回的key
setkey = (key) =>{
    this.setState(()=>{
        return {
            key,
        }
    })
}
}

// 定义表单
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

export default withRouter(NormalLogin); 
···