antv图例出现分页_ant design 学习（持续更新）

2019-11-18：

-- antd有啥好？

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

提炼自企业级中后台产品的交互语言和视觉风格。

开箱即用的高质量 React 组件。

使用 TypeScript 构建，提供完整的类型定义文件。

全链路开发和设计工具体系。

学习内容：(国际化)语言设置、datepicker、antV--G2、

一、 ConfigProvider 组件：

ConfigProvider 使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效。

通过参数locale 让所有antd组件显示中文：

二、当我指定了 DatePicker/RangePicker 的 mode 属性后，点击后无法选择年份/月份？

三、antV--G2图表：

npm安装：

sudo npm install @antv/g2 --save

🌰举例：在 html 中使用

四、Form 和Modal 组件组合使用：

export interface InputForm {

inputA : string;

}

interface RunProps extends FormComponentProps{

open :boolean;

setRunModal: React.Dispatch>;

}

export const RunModal= Form.create()((props : RunProps) =>{

const {form : {getFieldDecorator, validateFields, setFieldsValue},open, setRunModa}=props;

const onClose= () => setRunModal(false);

const onOk= () => validateFields((error, values : InputForm) => {

console.log('values', values)

if ( error ) { return error; }// values是一个对象，取出inputA 用 values.inputA

//

return setRunModal(false);

});

const onEntryAStart= async () =>{

const result=await selectXlsx();

setFieldsValue({inputA : result});

};return(

title="选择输入文件" visible={open}

onCancel={onClose} onOk={onOk}

>

{getFieldDecorator('inputA', {

rules: [{ required: true, message: '请输入文件A地址!' }],

})()}

选择

);

});

1、先说Form 在ts中如何使用属性工具：(红色字体部分均是Form 的内容：)

a)接口用于定义表单的内容

b)创建props 继承FormComponentProps (为了使用Form.props 的工具)，这个props还用于定义从调用处接受的数据。

c)Form.create()((props : RunProps) => { }经过 Form.create 包装的组件将会自带 this.props.form 属性，所以props 中能拿到 getFieldDecorator, validateFields，setFieldsValue 这三个工具。同时， 能为后面 validateFields 验证提供依据。

d)validateFields 校验并获取一组输入域的值与 Error，默认校验全部组件。如果返回error，会触发getFieldDecorator 的 提示错误信息 (如图)

e)getFieldDecorator ⚠️特别注意：它只能包裹一个控件！！用于监控这个组件(这里的空间指 )的values。 该方法一上来先指明id(⚠️注意，这个id指需要监控的key，如inputA，会把这个key的内容给到所包裹的控件使用，自动添加value)，然后根据参数选用即可，官方提醒：

f)setFieldsValue ：设置一组输入控件的值(注意：不要在 componentWillReceiveProps 内使用，否则会导致死循环)。这里是Form 自己有一套管理的state，使用该方法去修改state，而不需要用外部的setState或者redux。十分便利。

2、Modal 在ts中如何使用：(蓝色字体部分均是Modal 的内容：)

a)先看看这个函数的父函数：

//这个函数关键的就这一些

const [runModal, setRunModal] = React.useState(false);return(

setRunModal(true)}>运行

……

);

modal(对话框)需要一个state(boolean)控制是否打开，因此我们使用 const [runModal, setRunModal] = React.useState(false); 来控制这个state，hook满足我们的使用。

b)由于我们关闭这个modal 是在子函数里操作，所以要把runModal, setRunModal 通过props 传入。modal的使用官方文档挺详细的，这里不赘述。

五、Table 中如何使用分页器：

import { PaginationConfig } from 'antd/lib/table'import {Table} from'antd';

const [pageNum, setPage]= React.useState(1)

const paginationProps: PaginationConfig= {

position: "top", current: pageNum, defaultPageSize: 3,

onChange: (pageNum) => {setPage(pageNum)},

simple: true,

};

、更改主题颜色：