ant design 学习（持续更新）

2019-11-18：

安装、引用等问题查阅官方文档（https://ant.design/docs/react/introduce-cn），这里只记录我关注的点。

-- antd有啥好？

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

提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 React 组件。
使用 TypeScript 构建，提供完整的类型定义文件。
全链路开发和设计工具体系。

-- antd 提供的sandbox用于组件测试：https://codesandbox.io/s/antd-reproduction-template-kjx5r

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

一、 ConfigProvider 组件：

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

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

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

　　有专门讨论的文章：https://juejin.im/post/5cf65c366fb9a07eca6968f9

三、antV--G2图表：

文档：https://www.yuque.com/antv/g2-docs/get-started

github：https://github.com/antvis/g2/blob/master/README.zh-CN.md

npm安装：

sudo npm install @antv/g2 --save

🌰举例：在 html 中使用

我的笔记：https://www.cnblogs.com/marvintang1001/p/11884163.html

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

export interface InputForm {
    inputA : string;
}

interface RunProps extends FormComponentProps<InputForm> {
    open : boolean;
    setRunModal: React.Dispatch<React.SetStateAction<boolean>>;
}

export const RunModal = Form.create<RunProps>()((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 (
        <Modal
            title="选择输入文件"  visible={open} 
            onCancel={onClose} onOk={onOk}
        >
            <Form >
                <Form.Item label="输入文件A：">
                    <Row gutter={16}>
                     <Col span={20}>{getFieldDecorator('inputA', {
                        rules: [{ required: true, message: '请输入文件A地址!' }],
                    })(<Input />)}</Col>
                        <Col span={4}>
                            <Button onClick={onEntryAStart}>选择</Button>
                        </Col>
                    </Row>
                </Form.Item>
            </Form>
        </Modal>
    );
});

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

（对应antD 中： https://ant.design/components/form-cn/#this.props.form.getFieldDecorator(id,-options) ）

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

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

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

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

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

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

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

（对应antD 中：https://ant.design/components/modal-cn/#header ）

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

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

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

return (
   <FormItem>
          <Button type="primary" onClick={() => setRunModal(true)}>
                    运行
          </Button>
   </FormItem>
   <RunModal open={runModal} setRunModal={setRunModal} /> 
    
    ……
);

　　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, 
        };

<Table loading={loading} pagination={paginationProps} {...getTableProps()} />

、更改主题颜色：

posted @ 2019-11-18 18:30 Marvin_Tang 阅读(1146) 评论(0) 编辑收藏举报

刷新页面返回顶部

Marvin_Tang