6.21 react antd4.0+ 表单

antd按需引入

  1. 下载依赖
npm i  react-app-rewired customize-cra babel-plugin-import
  1. 在根目录下创建 config-overrides.js文件
const {override, fixBabelImports} = require('customize-cra');
module.exports = override( 
fixBabelImports('import', {
 libraryName: 'antd', 
 libraryDirectory: 'es', 
 style: 'css', }), 
 );
  1. 修改page.json文件(不是添加
"scripts": { "start": "react-app-rewired
 start", "build": "react-app-rewired
 build", "test": "react-app-rewired
 test", "eject": "react-scripts eject" },

注意: 不需要引入antd.css文件,会自动按需加载

修改颜色主体

  1. 下载依赖
npm i less@3.9.0 less-loader@4.1.0

注意:加上版本号,不然可能出现兼容问题

  1. 修改 config-overrides.js文件
    红色部分为要修改的地方,’#1DA57A’颜色可以自定义
    在这里插入图片描述
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
    // 针对antd实现按需打包,根据import来打包 (使用 babel-plugin-import)
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,  //自动打包相关的样式
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {
            '@primary-color': '#1DA57A'
        },
    }),
);

路由

下载依赖

npm i react-router-dom

注册路由

import {BrowserRouter,Switch,Route}
<BrowserRouter>
 <Switch>
 <Route path='/' component={Login}></Route>
 </Switch>
</BrowserRouter>

注意:这里的路径是 / 开头,component中 c是小写

表单form

函数组件中

1.如何取到form,

 const [form] = Form.useForm();

2.获取表单输入的值,直接提交表单的事件中直接获取

  const handleSubmit = (values) => {
         console.log(values);
    };
  1. 表单验证
    通过rules定义规则
 <Form.Item
    name="username"
    rules={[
        { required: true, message: '请输入用户名' },
        { min: 2, message: '用户名至少2位' },
        { max: 12, message: '用户名至多12位' },
        { pattern: /^\w+$/, message: '用户名必须是数组字母或者下划线' },

    ]}
>
    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
</Form.Item>
  1. 提交后验证
 const handleSubmit = (e) => {
        // console.log(e);
        // console.log(form);
        // 对表单进行校验
        form.validateFields().then(() => {
            console.log('验证通过');
        }).catch(err => console.log('验证失败'))
    };

完整代码:

import React from 'react'
import './index.less'
import logo from './images/logo.jpg'
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { apiLogin } from '../../api/index'
/*
  登入路由组件
*/
const Login = () => {
    // 得到form的对象
    const [form] = Form.useForm();
    const handleSubmit = (e) => {
        // console.log(e);
        // console.log(form);
        // 对表单进行校验
        form.validateFields().then((values) => {
            console.log(values); //获取所有表单的值
            console.log('验证通过');
        })
    };
    return (
        <div className="login">
            <header className="login-header">
                <img src={logo} alt="" />
                <span className="title">React项目:后台管理系统</span>
            </header>
            <section className="login-content">
                <h1>用户登入</h1>
                <Form
                    form={form}
                    className="login-form"
                    onFinish={handleSubmit}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            { required: true, message: '请输入用户名' },
                            { min: 2, message: '用户名至少2位' },
                            { max: 12, message: '用户名至多12位' },
                            { pattern: /^\w+$/, message: '用户名必须是数组字母或者下划线' },

                        ]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            { required: true, message: '请输入密码' },
                            { min: 5, message: '密码名至少5位' },
                            { max: 18, message: '面名至多18位' },

                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="密码"
                        />
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            Login
                     </Button>
                    </Form.Item>
                </Form>
            </section>
        </div>
    );
}
export default Login

类组件中

1.如何取form表单对象

 formRef = React.createRef();
  <Form
              ref={this.formRef}
              className="login-form"
              onFinish={this.handleSubmit}
          >
 const form  =  this.formRef.current

其他和函数组件相同

高阶组件,高阶函数

  1. 高阶函数

    • 一类特别的函数
      a. 接受函数类型的参数
      b. 返回值是函数
      满足这两个条件中的任意一个即可
    • . 常见
      a. 定时器: setTimeout()/setInterval()
      b. Promise: Promise(() => {}) then(value => {}, reason => {})
      c. 数组遍历相关的方法: forEach()/filter()/map()/reduce()/find()/findIndex()
      d. 函数对象的bind()
      e. Form.create()() / getFieldDecorator()()
    • . 高阶函数更新动态, 更加具有扩展性
  2. 高阶组件
    1). 本质就是一个函数
    2). 接收一个组件(被包装组件), 返回一个新的组件(包装组件), 包装组件会向被包装组件传入特定属性
    3). 作用: 扩展组件的功能

  3. 高阶组件与高阶函数的关系
    高阶组件是特别的高阶函数
    接收一个组件函数, 返回是一个新的组件函数

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值