React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 03 分类、产品

最新推荐文章于 2023-08-04 09:55:01 发布
最新推荐文章于 2023-08-04 09:55:01 发布
阅读量219 收藏
点赞数
分类专栏： 实战 文章标签： typescript react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012961419/article/details/119995609
版权

创建添加分类组件

创建组件文件

// src\components\admin\AddCategory.tsx
import { Button, Form, Input } from 'antd'
import { Link } from 'react-router-dom'
import Layout from '../core/Layout'

const AddCategory = () => {
  const onFinish = (value: { name: string }) => {
    console.log(value)
  }

  return (
    <Layout title="添加分类" subTitle="">
      <Form onFinish={onFinish}>
        <Form.Item name="name" label="分类名称">
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            添加分类
          </Button>
        </Form.Item>
      </Form>
      <Button>
        <Link to="/admin/dashboard">返回 Dashboard</Link>
      </Button>
    </Layout>
  )
}

export default AddCategory

配置路由

// src\Routes.tsx
import { HashRouter, Route, Switch } from 'react-router-dom'
import AddCategory from './components/admin/AddCategory'
import AdminDashboard from './components/admin/AdminDashboard'
import AdminRoute from './components/admin/AdminRoute'
import Dashboard from './components/admin/Dashboard'
import PrivateRoute from './components/admin/PrivateRoute'
import Home from './components/core/Home'
import Shop from './components/core/Shop'
import Signin from './components/core/Signin'
import Signup from './components/core/Signup'

const Routes = () => {
  return (
    <HashRouter>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/shop" component={Shop} />
        <Route path="/signin" component={Signin} />
        <Route path="/signup" component={Signup} />
        <PrivateRoute path="/user/dashboard" component={Dashboard} />
        <AdminRoute path="/admin/dashboard" component={AdminDashboard} />
        <AdminRoute path="/create/category" component={AddCategory} />
      </Switch>
    </HashRouter>
  )
}

export default Routes

配置链接入口

// src\components\admin\AdminDashboard.tsx
import { Col, Descriptions, Menu, Row, Typography } from 'antd'
import { Link } from 'react-router-dom'
import Layout from '../core/Layout'
import { ShoppingCartOutlined, UserOutlined, OrderedListOutlined } from '@ant-design/icons'
import { Jwt } from '../../store/models/auth'
import { isAuth } from '../../helpers/auth'

const { Title } = Typography

const AdminDashboard = () => {
  const {
    user: { name, email }
  } = isAuth() as Jwt

  const adminLinks = () => (
    <>
      <Title level={5}>管理员链接</Title>
      <Menu style={{ borderRight: 0 }}>
        <Menu.Item>
          <ShoppingCartOutlined style={{ marginRight: '5px' }} />
          <Link to="/create/category">添加分类</Link>
        </Menu.Item>
        <Menu.Item>
          <UserOutlined style={{ marginRight: '5px' }} />
          <Link to="">添加产品</Link>
        </Menu.Item>
        <Menu.Item>
          <OrderedListOutlined style={{ marginRight: '5px' }} />
          <Link to="">订单列表</Link>
        </Menu.Item>
      </Menu>
    </>
  )

  const adminInfo = () => (
    <Descriptions title="管理员信息" bordered>
      <Descriptions.Item label="昵称">{name}</Descriptions.Item>
      <Descriptions.Item label="邮箱">{email}</Descriptions.Item>
      <Descriptions.Item label="角色">管理员</Descriptions.Item>
    </Descriptions>
  )

  return (
    <Layout title="管理员 dashboard" subTitle="">
      <Row>
        <Col span="4">{adminLinks()}</Col>
        <Col span="20">{adminInfo()}</Col>
      </Row>
    </Layout>
  )
}

export default AdminDashboard

实现添加分类功能

// src\components\admin\AddCategory.tsx
import { Button, Form, Input, message } from 'antd'
import axios from 'axios'
import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { API } from '../../config'
import { isAuth } from '../../helpers/auth'
import { Jwt } from '../../store/models/auth'
import Layout from '../core/Layout'

const AddCategory = () => {
  const [name, setName] = useState<string>('')

  const { user, token } = isAuth() as Jwt

  useEffect(() => {
    async function addCategory() {
      try {
        const response = await axios.post<{ name: string }>(
          `${API}/category/create/${user._id}`,
          {
            name: name
          },
          {
            headers: {
              Authorization: `Bearer ${token}`
            }
          }
        )

        message.success(`[${response.data.name}] 分类添加成功`)
      } catch (error) {
        message.error(`${error.response.data.errors[0]}`)
      }
    }

    if (name) {
      addCategory()
    }
  }, [name])

  const onFinish = (value: { name: string }) => {
    setName(value.name)
  }

  return (
    <Layout title="添加分类" subTitle="">
      <Form onFinish={onFinish}>
        <Form.Item name="name" label="分类名称">
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            添加分类
          </Button>
        </Form.Item>
      </Form>
      <Button>
        <Link to="/admin/dashboard">返回 Dashboard</Link>
      </Button>
    </Layout>
  )
}

export default AddCategory

创建添加产品组件

创建组件文件

// src\components\admin\AddProduct.tsx
import { Button, Form, Input, Select, Upload } from 'antd'
import Layout from '../core/Layout'

const AddProduct = () => {
  return (
    <Layout title="添加产品" subTitle="">
      <Form>
        <Form.Item label="上传封面">
          <Upload>
            <Button>上传产品封面</Button>
          </Upload>
        </Form.Item>
        <Form.Item name="name" label="产品名称">
          <Input />
        </Form.Item>
        <Form.Item name="description" label="产品描述">
          <Input />
        </Form.Item>
        <Form.Item name="price" label="产品价格">
          <Input />
        </Form.Item>
        <Form.Item name="category" label="所属分类">
          <Select>
            <Select.Option value="">请选择分类</Select.Option>
            <Select.Option value="1">测试分类</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item name="quantity" label="产品库存">
          <Input />
        </Form.Item>
        <Form.Item name="shipping" label="是否需要运输">
          <Select>
            <Select.Option value={1}>是</Select.Option>
            <Select.Option value={0}>否</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            添加产品
          </Button>
        </Form.Item>
      </Form>
    </Layout>
  )
}

export default AddProduct

配置路由

// src\Routes.tsx
import { HashRouter, Route, Switch } from 'react-router-dom'
import AddCategory from './components/admin/AddCategory'
import AddProduct from './components/admin/AddProduct'
import AdminDashboard from './components/admin/AdminDashboard'
import AdminRoute from './components/admin/AdminRoute'
import Dashboard from './components/admin/Dashboard'
import PrivateRoute from './components/admin/PrivateRoute'
import Home from './components/core/Home'
import Shop from './components/core/Shop'
import Signin from './components/core/Signin'
import Signup from './components/core/Signup'

const Routes = () => {
  return (
    <HashRouter>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/shop" component={Shop} />
        <Route path="/signin" component={Signin} />
        <Route path="/signup" component={Signup} />
        <PrivateRoute path="/user/dashboard" component={Dashboard} />
        <AdminRoute path="/admin/dashboard" component={AdminDashboard} />
        <AdminRoute path="/create/category" component={AddCategory} />
        <AdminRoute path="/create/product" component={AddProduct} />
      </Switch>
    </HashRouter>
  )
}

export default Routes

配置链接入口

// src\components\admin\AdminDashboard.tsx
import { Col, Descriptions, Menu, Row, Typography } from 'antd'
import { Link } from 'react-router-dom'
import Layout from '../core/Layout'
import { ShoppingCartOutlined, UserOutlined, OrderedListOutlined } from '@ant-design/icons'
import { Jwt } from '../../store/models/auth'
import { isAuth } from '../../helpers/auth'

const { Title } = Typography

const AdminDashboard = () => {
  const {
    user: { name, email }
  } = isAuth() as Jwt

  const adminLinks = () => (
    <>
      <Title level={5}>管理员链接</Title>
      <Menu style={{ borderRight: 0 }}>
        <Menu.Item>
          <ShoppingCartOutlined style={{ marginRight: '5px' }} />
          <Link to="/create/category">添加分类</Link>
        </Menu.Item>
        <Menu.Item>
          <UserOutlined style={{ marginRight: '5px' }} />
          <Link to="/create/product">添加产品</Link>
        </Menu.Item>
        <Menu.Item>
          <OrderedListOutlined style={{ marginRight: '5px' }} />
          <Link to="">订单列表</Link>
        </Menu.Item>
      </Menu>
    </>
  )

  const adminInfo = () => (
    <Descriptions title="管理员信息" bordered>
      <Descriptions.Item label="昵称">{name}</Descriptions.Item>
      <Descriptions.Item label="邮箱">{email}</Descriptions.Item>
      <Descriptions.Item label="角色">管理员</Descriptions.Item>
    </Descriptions>
  )

  return (
    <Layout title="管理员 dashboard" subTitle="">
      <Row>
        <Col span="4">{adminLinks()}</Col>
        <Col span="20">{adminInfo()}</Col>
      </Row>
    </Layout>
  )
}

export default AdminDashboard

获取分类列表

创建分类相关的 action

// src\store\models\category.ts
export interface Category {
  _id: string
  name: string
}


// src\store\actions\category.action.ts
import { Category } from '../models/category'

export const GET_CATEGORY = 'GET_CATEGORY'
export const GET_CATEGORY_SUCCESS = 'GET_CATEGORY_SUCCESS'

export interface GetCategoryAction {
  type: typeof GET_CATEGORY
}

export interface GetCategorySuccessAction {
  type: typeof GET_CATEGORY_SUCCESS
  payload: Category[]
}

export const getCategory = (): GetCategoryAction => ({
  type: GET_CATEGORY
})

export const getCategorySuccess = (payload: Category[]): GetCategorySuccessAction => ({
  type: GET_CATEGORY_SUCCESS,
  payload
})

// action 的联合类型
export type CategoryUnionType = GetCategoryAction | GetCategorySuccessAction

定义 reducer

// src\store\reducers\category.reducer.ts
import { CategoryUnionType, GET_CATEGORY, GET_CATEGORY_SUCCESS } from '../actions/category.action'
import { Category } from '../models/category'

export interface CategoryState {
  category: {
    loaded: boolean
    success: boolean
    result: Category[]
  }
}

const initialState: CategoryState = {
  category: {
    loaded: false,
    success: false,
    result: []
  }
}

export default function categoryReducer(state = initialState, action: CategoryUnionType) {
  switch (action.type) {
    case GET_CATEGORY:
      return {
        ...state,
        category: {
          loaded: false,
          success: false,
          result: []
        }
      }
    case GET_CATEGORY_SUCCESS:
      return {
        ...state,
        category: {
          loaded: true,
          success: true,
          result: action.payload
        }
      }
    default:
      return state
  }
}


// src\store\reducers\index.ts
import { connectRouter, RouterState } from 'connected-react-router'
import { History } from 'history'
import { combineReducers } from 'redux'
import authReducer, { AuthState } from './auth.reducer'
import categoryReducer, { CategoryState } from './category.reducer'
// import testReducer from './test.reducer'

// 定义一个包含 router 的 store 类型接口 供外部使用
export interface AppState {
  router: RouterState
  auth: AuthState
  category: CategoryState
}

const createRootReducer = (history: History) =>
  combineReducers({
    // test: testReducer,
    router: connectRouter(history),
    auth: authReducer,
    category: categoryReducer
  })

export default createRootReducer

定义 sage

// src\store\sagas\category.sage.ts
import axios, { AxiosResponse } from 'axios'
import { put, takeEvery } from 'redux-saga/effects'
import { API } from '../../config'
import { getCategorySuccess, GET_CATEGORY } from '../actions/category.action'
import { Category } from '../models/category'

function* handleGetCategory() {
  const response: AxiosResponse = yield axios.get<Category[]>(`${API}/categories`)

  yield put(getCategorySuccess(response.data))
}

export default function* categorySage() {
  // 获取分类列表
  yield takeEvery(GET_CATEGORY, handleGetCategory)
}


// src\store\sagas\index.ts
import { all } from 'redux-saga/effects'
import authSaga from './auth.saga'
import categorySage from './category.sage'

export default function* rootSaga() {
  yield all([authSaga(), categorySage()])
}

修改组件

// src\components\admin\AddProduct.tsx
import { Button, Form, Input, Select, Upload } from 'antd'
import Layout from '../core/Layout'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getCategory } from '../../store/actions/category.action'
import { AppState } from '../../store/reducers'
import { CategoryState } from '../../store/reducers/category.reducer'

const AddProduct = () => {
  const dispatch = useDispatch()

  const category = useSelector<AppState, CategoryState>(state => state.category)

  useEffect(() => {
    dispatch(getCategory())
  }, [])

  return (
    <Layout title="添加产品" subTitle="">
      <Form
        initialValues={{
          category: '',
          shipping: 0
        }}
      >
        <Form.Item>
          <Upload label="上传封面">
            <Button>上传产品封面</Button>
          </Upload>
        </Form.Item>
        <Form.Item name="name" label="产品名称">
          <Input />
        </Form.Item>
        <Form.Item name="description" label="产品描述">
          <Input />
        </Form.Item>
        <Form.Item name="price" label="产品价格">
          <Input />
        </Form.Item>
        <Form.Item name="category" label="所属分类">
          <Select>
            <Select.Option value="">请选择分类</Select.Option>
            {category.category.result.map(item => (
              <Select.Option key={item._id} value={item._id}>
                {item.name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="quantity" label="产品库存">
          <Input />
        </Form.Item>
        <Form.Item name="shipping" label="是否需要运输">
          <Select>
            <Select.Option value={1}>是</Select.Option>
            <Select.Option value={0}>否</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            添加产品
          </Button>
        </Form.Item>
      </Form>
    </Layout>
  )
}

export default AddProduct

实现添加产品功能

// src\components\admin\AddProduct.tsx
import { Button, Form, Input, message, Select, Upload } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import Layout from '../core/Layout'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getCategory } from '../../store/actions/category.action'
import { AppState } from '../../store/reducers'
import { CategoryState } from '../../store/reducers/category.reducer'
import { RcFile, UploadProps } from 'antd/lib/upload'
import axios from 'axios'
import { API } from '../../config'
import { isAuth } from '../../helpers/auth'
import { Jwt } from '../../store/models/auth'

// 将图片转化为 Data Url
function getBase64(blob: RcFile, callback: (e: string) => void) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result as string))
  reader.readAsDataURL(blob)
}

const AddProduct = () => {
  const dispatch = useDispatch()
  const [file, setFile] = useState<RcFile>()

  const category = useSelector<AppState, CategoryState>(state => state.category)

  useEffect(() => {
    dispatch(getCategory())
  }, [])

  // 产品封面 Data Url
  const [imgUrl, setImgUrl] = useState<string>()
  // 上传产品封面按钮
  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  )
  // Upload 组件属性
  const props: UploadProps = {
    accept: 'image/*',
    showUploadList: false,
    listType: 'picture-card',
    beforeUpload(file: RcFile) {
      // 获取文件保存下来等待和表单一起提交
      setFile(file)
      // 阻止默认上传行为（发送请求）
      return false
    },
    onChange({ file }) {
      // 获取图片的 Data Url 显示在页面
      getBase64(file as RcFile, (dataUrl: string) => {
        setImgUrl(dataUrl)
      })
    }
  }

  const addProductForm = () => {
    const { user, token } = isAuth() as Jwt

    const onFinish = (product: any) => {
      // 要将二进制图片和普通文本字段结合在一起发送需要用到 FormData
      const formData = new FormData()
      for (let attr in product) {
        formData.set(attr, product[attr])
      }
      if (typeof file !== 'undefined') {
        formData.set('photo', file)
      }

      axios
        .post(`${API}/product/create/${user._id}`, formData, {
          headers: {
            Authorization: `Bearer ${token}`
          }
        })
        .then(() => {
          message.success('产品添加成功')
        })
        .catch(() => {
          message.success('产品添加失败')
        })
    }

    return (
      <Form
        onFinish={onFinish}
        initialValues={{
          category: '',
          shipping: 0
        }}
      >
        <Form.Item label="上传封面">
          <Upload {...props}>
            {imgUrl ? (
              <img src={imgUrl} alt="产品封面" style={{ maxWidth: '100%', maxHeight: '100%' }} />
            ) : (
              uploadButton
            )}
          </Upload>
        </Form.Item>
        <Form.Item name="name" label="产品名称">
          <Input />
        </Form.Item>
        <Form.Item name="description" label="产品描述">
          <Input />
        </Form.Item>
        <Form.Item name="price" label="产品价格">
          <Input />
        </Form.Item>
        <Form.Item name="category" label="所属分类">
          <Select>
            <Select.Option value="">请选择分类</Select.Option>
            {category.category.result.map(item => (
              <Select.Option key={item._id} value={item._id}>
                {item.name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="quantity" label="产品库存">
          <Input />
        </Form.Item>
        <Form.Item name="shipping" label="是否需要运输">
          <Select>
            <Select.Option value={1}>是</Select.Option>
            <Select.Option value={0}>否</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            添加产品
          </Button>
        </Form.Item>
      </Form>
    )
  }

  return (
    <Layout title="添加产品" subTitle="">
      {addProductForm()}
    </Layout>
  )
}

export default AddProduct
皮蛋很白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
redux-form-antd:Redux表单的Ant设计绑定
05-14
Redux-form-antd redux-form和antd的绑定。 该库应与redux形式和react-final形式兼容。 欢迎索取最终形式的故事。 是一组包装器，用于促进将redd 与antd组件一起使用。 :eyes: 安装 使用 ： $ npm install --save redux-form-antd 可用组件 选择 单选按钮 日期选择器 月选择器 NumberField 文本域 转变 用法 与其从antd导入组件类， antd从redux-form-antd导入它，然后将组件类直接传递给Field的component prop。 import { reduxForm , Field } from 'redux-form' import { SelectField , TextField , } from 'redux-form-antd' class MyF
react-redux + antd 结合使用 Form
mhbsoft的博客
06-14 1158
第一步： 导入相应的依赖 import {connect} from 'react-redux'; import {Button, Form, Input, Table, Select} from 'antd'; 第二部： 编写组件 class Manage extends Component { } 第三部：结合所有的内容 export default connect(mapStateToP...
基于FastAPI+Vue+AntDesign实现的电商管理系统
最新发布
一米阳光的博客
08-04 114
一款 Python 语言基于FastAPI、Vue3.x、AntDesign、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架。
基于Django+Vue+AntDesign实现的电商管理系统
一米阳光的博客
03-22 160
一款 Python 语言基于Django、Vue3.x、AntDesign、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮等等一系列个性化、轻量级的组件，是一款真正意义上实现低代码开发的敏捷开发框架。
React+Redux+Ant Design+TypeScript 电子商务实战-服务端应用 06 订单管理api和其它api
皮蛋很白的博客
08-30 190
创建订单 Schema // models\order.js const mongoose = require('mongoose') const Product = require('./product') const Category = require('./category') // 创建快照类型 // 克隆产品 Schema const snapshotProductSchema = Product.schema.clone() // 克隆分类 Schema const snapshopCate
react-typescript-react-router-redux-antDesign-demo：React + typescript + react-router + redux + antDesign项目构建
02-20
它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject或yarn eject 注意：这是单向操作。 ...
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
10-16
主要介绍了深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践，TypeScript 增加了代码的可读性和可维护性，拥有活跃的社区，,需要的朋友可以参考下
CpDesign:TypeScript + React-hooks + react-redux + axios + AntDesignMobile + react-intl国际化
05-11
项目目录|-- CPDESIGN|-- README.md|-- package.json|-- tsconfig.json|-- yarn.lock|-- config| |-- env.js| |-- modules.js| |-- paths.js| |-- pnpTs.js| |-- webpack.config.js| |-- webpackDevServer.config.js...
k_music:音乐播放器网站，使用Typescript+React+Redux实现
05-15
ant-design UI 框架使用了 ant-design less ant-design 使用的是 less 预处理语言，为了统一我使用的也是 less 后端技术栈 数据源来自网易云音乐，接口服务来自 具体使用方式请参展官方文档，写的挺详细的。 docker ...
手把手带你用next搭建一个完善的react服务端渲染项目（集成antd、redux、样式解决方案）
大灰狼的小绵羊哥哥的博客
08-22 2360
前言 本文参考了慕课网jokcy老师的React16.8+Next.js+Koa2开发Github全栈项目，也算是做个笔记吧。 源码地址 github.com/sl1673495/n… 介绍 Next.js 是一个轻量级的 React 服务端渲染应用框架。 官网：nextjs.org 中文官网：nextjs.frontendx.cn 当使用 React 开发系统的时候，常常需要配置很...
React+Redux+Ant Design+TypeScript 电子商务实战-服务端应用 04 产品管理api
皮蛋很白的博客
08-30 217
Mongoose - ObjectId Mongoose 在创建 Schema 的时候默认配置一个 _id 属性，它的 SchemaType 是 mongoose.Schema.Types.ObjectId(等同于 mongoose.ObjectId)。 当创建一个 document 的时候会自动地生成一个 _id 属性，值是 mongoose.Types.ObjectId实例化的对象。 Mongoose 拒绝保存没有 _id 的文档。 查询到的 _id 是一个对象，可以调到它的 toString() 方法
React+Redux+Ant Design+TypeScript 电子商务实战-服务端应用 01 服务端初始搭建
皮蛋很白的博客
08-30 267
服务端技术栈介绍 脚本：Node.js 数据库：MongoDB（安装教程） 数据可视化：Robo 3T（安装教程） 初始化服务器端项目 # 创建项目文件夹 mkdir ecommerce-end cd ecommerce-end # 生成 package.json npm init -y 创建初始目录结构 ├─ config # 存放应用配置文件 ├─ controllers # 存放 MongoDB 数据管理方法 ├─ helpers # 存放辅助函数 ├─ models # 存放 MongoDB
React Hooks与Redux的配合及状态管理方案(清晰 推荐阅读)
hsany330的专栏
05-27 1520
Hooks面世已有一段时间，但目前在状态管理方面，还未正式推出官方解决方案。因此目前社区中hooks主要有这么三种方案来解决应用的状态管理问题 使用Redux-React-Hook库替代React-redux，与Redux一同配合 使用useReducer、useContext等纯hook函数替代react-redux，与Redux一同配合 使用useReducer、useContext等纯hook函数完全替代react-redux与Redux，完全通过hooks的方式管理应用的状态 在这几个方案之中
And Design：拓荒笔记——Form表单
weixin_30429201的博客
03-13 467
And Design：拓荒笔记——Form表单 Form.create(options) 　　Form.create（）可以对包含Form表单的组件进行改造升级，会返回一个新的react组件。 　　经Form.create()包装过的组件会自带this.props.form属性，这个属性提供了很多API来实现对表单的操作： 　　 　　代码如下： class Customi...
antd的form表单自定义验证validator的注意事项
热门推荐
Lofan 的博客
02-04 2万+
validator 这个验证在if-else里，每个判断情况都要加callback，不然会导致所有rule验证失效，页面上没填都不提示。 比如这样： <Form.Item label="模式"> {getFieldDecorator("p_mode", { rules: [ { required: true, message: "请选...
react基础（jsx，组件，react-dom，react-router-dom，red ux，脚手架安装+新旧生命周期+通信...）
lwg112233的博客
10-25 571
概念： react 是目前最流行的框架;其中是采用 mvvm 的思想，让我们把所有的只关注视图层和逻辑层 react 的创始人：Facebook； js 的创始人：布兰登 艾奇； react由：(jsx，组件，react-dom)，和他的全家桶技术（react-router-dom，redux） jsx：用于将jsx转化js语法 react-router-dom：路由 react-dom：虚拟dom redux：管理数...
antd的form组件在form标签外触发验证
Lofan 的博客
01-14 6819
什么情况需要在form标签外触发验证呢？ 有，比如新增页是个全屏弹框的自定义组件，这种组件，一般都带有 close icon ，确认，取消按钮。 那不管这种弹框的内容是什么，都是要通过确认btn去触发。 写法还是那个写法，就是换个位置调用 如果触发按钮在Form标签内部，就直接在Form标签上绑定onSubmit事件，指向handleSubmit 方法； <Form onSubmit={ha...
将自定义和第三方React表单组件与Ant设计和Typescript一起使用
weixin_26750481的博客
09-07 1022
The React ecosystem has a vast amount of components and libraries that you can use to easily build web applications. The Ant Design library is one of those which provides a great range of ready to go ...
React入门实例:组件化+react-redux实现网上商城(1)
soybean
08-18 4132
项目运行 1.git clone https://github.com/soybeanxiaobi/React_demo_onlineShop 2.cd React_demo_onlineShop(文件目录) 3.npm install(安装依赖) 4.npm start(项目启动) 功能一览 1.购买产品 2.查看购买的产品 3.删除购买的产品 功能...
React + React Router + Redux + Axios + Ant Design
07-28
React + React Router + Redux + Axios + Ant Design 是一套常用的前端开发技术栈，用于构建现代化的 Web 应用程序。下面我会逐个介绍这些技术的作用和特点： - React 是一个用于构建用户界面的 JavaScript 库，它...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值