[JavaScript知识库]React-Antd-表单-内联登录框

文档地址

import React, { useState, useEffect } from "react";
import { Form, Input, Button } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";

export default function App(props) {
  const [form] = Form.useForm();
  return (
    <Form
      form={form}
      name="horizontal_login"
      layout="inline"
      onFinish={(values) => {
        console.log(values);
      }}
    >
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: "Please input your username!",
          },
        ]}
      >
        <Input
          prefix={<UserOutlined className="site-form-item-icon" />}
          placeholder="Username"
        />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: "Please input your password!",
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="Password"
        />
      </Form.Item>
      <Form.Item shouldUpdate>
        {() => {
          // 检查一组字段是否被用户操作过，allTouched 为 true 时检查是否所有字段都被操作过
          console.log(form.isFieldsTouched(true));
          // 获取一组字段名对应的错误信息，返回为数组形式
          /**
           * {name: Array(1), errors: Array(0)}
           * {name: Array(1), errors: Array(1)}
           */
          console.log(form.getFieldsError());
          return (
            <Button type="primary" htmlType="submit" disabled={
              !form.isFieldsTouched(true)||!!form.getFieldsError().filter((item)=>{
                //如果item.errors的数组长度为0就过滤下去
                return !!item.errors.length
              }).length
            }>
              登录
            </Button>
          );
        }}
      </Form.Item>
    </Form>
  );
}