6.21 react antd4.0+ 表单

antd按需引入

1. 下载依赖

npm i  react-app-rewired customize-cra babel-plugin-import

2. 在根目录下创建 config-overrides.js文件

const {override, fixBabelImports} = require('customize-cra');
module.exports = override( 
fixBabelImports('import', {
 libraryName: 'antd', 
 libraryDirectory: 'es', 
 style: 'css', }), 
 );

3. 修改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

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

2. 修改 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);
    };

3. 表单验证
   通过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>

4. 提交后验证

 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. 高阶组件与高阶函数的关系
   高阶组件是特别的高阶函数
   接收一个组件函数, 返回是一个新的组件函数