react
- antd按需引入
- 修改颜色主体
- 路由
- 表单form
- 函数组件中
- 类组件中
- 高阶组件,高阶函数
antd按需引入
- 下载依赖
npm i react-app-rewired customize-cra babel-plugin-import
- 在根目录下创建 config-overrides.js文件
const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css', }),
);
- 修改page.json文件(不是添加)
"scripts": { "start": "react-app-rewired
start", "build": "react-app-rewired
build", "test": "react-app-rewired
test", "eject": "react-scripts eject" },
注意: 不需要引入antd.css文件,会自动按需加载
修改颜色主体
- 下载依赖
npm i less@3.9.0 less-loader@4.1.0
注意:加上版本号,不然可能出现兼容问题
- 修改 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);
};
- 表单验证
通过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>
- 提交后验证
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
其他和函数组件相同
高阶组件,高阶函数
- 高阶函数
- 一类特别的函数
a. 接受函数类型的参数
b. 返回值是函数
满足这两个条件中的任意一个即可 - . 常见
a. 定时器: setTimeout()/setInterval()
b. Promise: Promise(() => {}) then(value => {}, reason => {})
c. 数组遍历相关的方法: forEach()/filter()/map()/reduce()/find()/findIndex()
d. 函数对象的bind()
e. Form.create()() / getFieldDecorator()() - . 高阶函数更新动态, 更加具有扩展性
- 高阶组件
1). 本质就是一个函数
2). 接收一个组件(被包装组件), 返回一个新的组件(包装组件), 包装组件会向被包装组件传入特定属性
3). 作用: 扩展组件的功能 - 高阶组件与高阶函数的关系
高阶组件是特别的高阶函数
接收一个组件函数, 返回是一个新的组件函数