随笔分类 - react.js
react.JS相关东西
摘要：使用场景: 当前输入组件的验证需要根据其他项的值进行变化 如: 产品分类选择了必填产品,产品名称就是必填,如果选择其他,就不是必填 这里展示两种校验 一种是填写时,输入组件的验证,一般是 是否可编辑disable 是否展示isshow等 另外是点击提交时,rules校验,是否通过校验方法 主要是改变
阅读全文
摘要：如果是菜单跳转,只需要在cofig/route.ts文件中增加页面信息,点击菜单就能跳转到对应页面 如果是页面链接跳转,有两种, 1.可以通过link链接类似vue的router-link 2.通过history.push 类似vue的router.push 文档地址 https://pro.ant
阅读全文
摘要：githup源代码https://github.com/shengbid/antprov5/blob/master/src/pages/product/addProduct/index.tsx 使用场景: 一个form表单组件,提交按钮在父组件,点击时要调用子组件方法获取子组件数据 child.ts
阅读全文
摘要：select默认有value,和label两个属性,有时候需要选择数据后带出其他值 如图 选择公司后带出公司数据 select的onchange事件第二个回调参数可以拿到所有定义在option上的值 代码 // 根据选择公司进行回填 const changeCompany = (val, optio
阅读全文
摘要：需求场景:多选框,底下的内容根据选择的值来展示,选项值和内容对应 如: 选择A,展示A的内容 选择B,展示B的内容 所以需要点击选择的时候,知道当前选中的是哪一项 这个是选择组,一开始使用 了CheckboxGroup,但是这个onchange回调拿到的是选择的全部数值,不能知道当前选中的数值 换成
阅读全文
摘要：昨天项目打包后,部分组件的样式突然不对了,本地代码正常 这个项目是从原来的项目拉的分支,修改部分内容后重新打包的,原来的项目样式正常,本地样式也正常 找了很久也没发现问题,(＃￣～￣＃) 后来去官网,发现官网的例子样式有问题,竟然和我线上环境的问题一样 这下真相了 是因为这个新拉的项目,打包会自动下
阅读全文
摘要：DatePicker时间范围限制,都是对disabledDate这个参数赋值,返回Boolean值,true是不可选,false是可选 disabledDate是一个函数,能拿到current当前鼠标移入的时间,只需要对这个时间进行限制就可以了 antd的DatePicker会引入moment,我们
阅读全文
摘要：新项目使用的是ant-pro的模板,里面有需求需要用到兄弟组件传值,学过vue的肯定马上能想到vuex. ant-pro 也有自己的数据管理,就是dva.其实使用和功能与vuex大同小异 在ant-prov5版本之前,项目中有预设models数据管理,v5版本中就没有了 使用方法 1.在项目src目
阅读全文
摘要：博客源码https://github.com/shengbid/antdpro-demo,有需要可以下载下来看效果 EditableProTable默认是在单行保存时调用表单验证 我这里的需求是点击外部的保存要对整个表单进行验证 EditableProTable提供了editable属性,可以设置f
阅读全文
摘要：项目使用ant-pro的EditableProTable,在编辑时给表格数据赋值初始值的时候报错,主要是因为这里面有文件展示 报错内容如下 Error: Objects are not valid as a React child (found: object with keys {id, proj
阅读全文
摘要：项目使用的是ant-pro模板 有个可编辑表格的需求,效果图如下 ant-pro提供了EditableProTable 组件,我使用的是这种https://procomponents.ant.design/components/editable-table 不过这里展示的默认都是input输入框,我
阅读全文
摘要：根据ant-design-pro官网https://pro.ant.design/docs/getting-started-cn的安装提示,在项目目录下使用git命令运行yarn create umi,然后报错,报错的大概意思就是权限不足, $ yarn create umiyarn create
阅读全文
摘要：使用modal弹框或者子组件填写提交表单数据时,都会有展示编辑已提交数据的需求,也就是弹框里组件的数据初始化 使用的时候遇到一个问题,就是弹框里编辑的内容,关闭弹框后再次打开并不会清空 百度查了一下,大多提供了两种方式,设置destroyOnClose,或者根据visible展示 这种方法对于在当前
阅读全文
摘要：在react项目中使用sass-module引入样式文件报错 一开始的写法是这样,当时查了很多网上的资料也是这种写法,然鹅这种写法现在并不行 根据上图的报错,options传入了一个非法的参数getLocalIdent,这个getLocalIdent其实是modules的参数 然后修改一下写法 再次
阅读全文
摘要：最近写react用的都是antd组件,不得不说,antd组件在使用上会比element-UI复杂点,不知道是因为react的原因不.很多组件的方法是需要自己配置的,在element-ui中可能只需要增加一个属性,最近也使用也踩了一些坑.今天总结一下Tree树形组件的使用和一些闭坑指南把. 项目源码:
阅读全文
摘要：之前写了在vue中使用mockjs模拟后台接口,现在使用react,也把react中的使用写一下.基本方法和vue一样 我这个项目是用react脚手架搭建的,项目源码地址: https://github.com/shengbid/my-react-admin 1. 安装mockjs和axios ya
阅读全文
摘要：githup代码地址https://github.com/shengbid/antprov5/tree/master/src/pages/spanTable 效果如下 其实这种情况也可以使用树形数据表格展示,但是表格合并展示,看起来更直观.反正产品说哪种展示就哪种展示吧 我这里用到两种类型的后台数据
阅读全文
摘要：有时候表单中的某些字段是需要调用后台接口验证,比如账号,ID之类的.这时候页面需要根据后台返回结果提示 // 验证账号是否已经被添加过 const checkAccount = (value: string | number) => { // 这个是rules自定义的验证方法 return new
阅读全文
摘要：项目是用的react hook写的,引入了antd 的upload上传组件,页面效果如下 代码 import React, { useState } from 'react' import { Modal, Form, Upload, message, Button } from 'antd' im
阅读全文
摘要：项目是通过create react app创建的,要配置一个根路径.我的项目是通过npm run eject已经解开了config配置文件,所以这里就写一下,有config配置文件的根路径配置方法.当然没又npm run eject出配置文件也是可以设置根路径的,这个配置之后再写 找到config下
阅读全文
浙公网安备 33010602011771号