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()} />

 

 

 

、更改主題顏色：