
react hook
文章平均质量分 52
Caiyun6666
代码使我快乐!
展开
-
React Hooks + TypeScript + Ant Design -------------表单动态增减实现
官方地址:https://ant.design/components/form-cn/#components-form-demo-dynamic-form-item基础Demoimport { Form, Input, Button, Space } from 'antd';import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';const Demo = () => { const onFinish .原创 2021-08-12 11:03:10 · 683 阅读 · 0 评论 -
React Hooks + Umi Hooks + Ant Design Pro -------- 实时请求数据,监测到数据改变就局部刷新表格
1.前期准备必要条件1:首先得有一个高级表格,没有自己就去官方文档找一个必要条件2:高级表格获取数据源方式为request必要条件3:有umi的包 能用useRequest(setTimeout应该也可以但操作应该不一样)原因:我用的这个2.实现1.定义两个状态params用来装局部刷新的请求数据compareData用来装最近两次请求回来的数据 const [params, setParams] = useState<any>({}); const [compareDa原创 2021-01-20 16:26:56 · 1407 阅读 · 2 评论 -
React Hooks + TypeScript + Ant Design -------------图片上传(手动)
1.引入组件这里用的组件的可拖入上传的 import { Upload, message, Modal, Button } from "antd"; const { Dragger } = Upload;2.定义好放须上传图片的约束接口interface IUploadType { fileList: RcFile[]; uploading: boolean;}其中RcFile 为upload组件自带约束,引入即可import { RcFile } from "antd/lib/原创 2021-01-19 12:03:04 · 1235 阅读 · 0 评论 -
React Hooks + AntV(G2/G2Plot) ----------- 多种实现分组柱状图的方法(包括Ant Design Charts)
一、AntV的g2plot分组柱状图优点:用处更广泛,用法更简单缺点:tiptop以一组的形式展示(不影响使用)效果图:数据:数据源格式为一个数组对象const data = [ { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9, }, { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8, }, { name: 'London', 月份: '原创 2021-01-19 11:28:05 · 6663 阅读 · 1 评论 -
Ant Design Pro --------------- ProTable高级表格细节用法(持续更新中...)
热门用法参考官方文档:https://procomponents.ant.design/components/table一、菜单栏有些时候菜单栏不需要那么多,而不对菜单栏进行设置就会默认全部显示。所以需要删除一些。默认全为true,如果不要就设置为false即可。例如不要刷新: <ProTable options={{ reload: false }} />例如全不要: <ProTable options={false .原创 2021-01-07 17:53:52 · 12594 阅读 · 2 评论 -
React Hooks-----------Form中有自定义组件后getFieldsValue onFinish获取数据undefined
已知对于自定义或第三方的表单控件,也可以与 Form 组件一起使用。只要该组件遵循以下的约定:(1)提供受控属性 value 或其它与 valuePropName 的值同名的属性。(2)提供 onChange 事件或 trigger 的值同名的事件。(3)不能是函数式组件。问题但是React Hooks就是函数式组件,在进行表单提交时自定义组件中的值就不能被获取。如下图全为undefined用法父组件 const [form] = Form.useForm(); const {原创 2021-01-06 17:45:18 · 3392 阅读 · 0 评论 -
React Hooks-----------useState、useEffect的使用
useState使用:定义const [num, updateNum] = useState(0);即:const [状态,改变状态的方法] = useState(‘初始值’)使用function increment() {updateNum(num + 1);}<p onClick={increment}>{num}</p>;即改变点击一次num加一useEffect使用:useEffect(callback, array)参数callback:原创 2021-01-05 10:39:50 · 207 阅读 · 1 评论