antd是螞蟻金服推出的ui元件庫，給我們在react專案開發中提供了大大的便利。但在使用的過程中，或多或少的會遇到一些問題，畢竟，用的是別人的東西，就得遵守別人的規則嘛！官方文件：https://ant.design/docs/react/introduce-cn

1. 國際化（中文化）

通過官方文件我們可以知道，很多元件如DatePicker、Modal等等預設的文字都是英文。如果是輸入框的提示文字我們可以通過元件的placeholder屬性來自定義；如果是模態框底部按鈕的文字我們也可以通過模態框元件提供的cancelText 、okText 等屬性來自定義，那如果是時間外掛彈出的日曆選擇裡面的標題日期呢？又或是穿梭框的項數總計？諸如此類…

程式碼如下（以DatePicker為例，其他元件用法相同）：

import React, {Component} from 'react';
import { LocaleProvider, DatePicker } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';

class MyComponent extends Component {
    render() {
        return (
            <div className='content'>
                <LocaleProvider locale={zh_CN}>
                    <DatePicker />
                </LocaleProvider>
            </div>
        )
    }
}
 

如果我們需要全域性配置中文，則只需要在最外層的 <App />元件外包裹 <LocaleProvider>元件即可。

ReactDOM.render(
    <LocaleProvider locale={zh_CN}>
        <App />
    </LocaleProvider>, 
    document.getElementById('root')
);

如涉及到其他語言，詳情參考官方說明文件：https://ant.design/components/locale-provider-cn/

2. 表單校驗取值

當我們使用antd的表單元件時，不能使用傳統的方式獲取輸入框或者其他表單元件的值了。這是，我們需要藉助官方提供的getFieldDecorator 來獲取表單的值。要得到getFieldDecorator的前提必須要先使用Form.create()建立表單。

程式碼如下：

import React, {Component} from 'react';
import {Row, Col, Form, Input, Button} from 'antd';

const FormItem = Form.Item;

class MyForm extends Component {
    getFormItemLayout = () => {
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 15 },
            },
        };
        return formItemLayout;
    }
    render() {
        const fields = this.props.fields;
        const { getFieldDecorator } = this.props.form;
        return (
            <div className={'my-form'}>
                <Form layout="inline">
                    <Row>
                        <Col span={4}><FormItem {...this.getFormItemLayout()} label={'這是輸入框label：'}>    {getFieldDecorator('name', {})( //這裡的name即表單輸入框的name屬性值     <Input /> )}</FormItem>
                        </Col>
                    </Row>
                </Form>
            </div>
        );
    }
}

//注意，必須有這一步才能在元件中通過this.props.form獲取getFieldDecorator。
const WrappedForm = Form.create()(MyForm ); 

上面的程式碼我們用getFieldDecorator處理了表單，接下來就可以通過一些官方提供的api獲取輸入框的值了。如果需要給表單提供驗證或預設值，則在使用getFieldDecorator是傳入指定的引數即可。
程式碼如下：

{getFieldDecorator('name', {
    initialValue: 'defaultValue', //預設值
    rules: [ { // 驗證規則
        required: true, message: '請輸入內容',
    }]
})(
    <Input />
)}

我們在獲取表單的值的時候，如果需要驗證表單，則可以通過下面的程式碼觸發表單並獲取到值：

this.props.form.validateFieldsAndScroll((err, values) => {
  if (!err) {
    console.log('這是表單的值：', values);
  }
});

上面程式碼中，validateFieldsAndScroll作用是校驗完後，如果校驗不通過的選單域不在可見範圍內，則自動滾動進可見範圍。這裡也可以使用validateFields, 都可以校驗並獲取值，但後者不會自動滾動到可見範圍。

如果只需要觸發校驗不需要取值，則直接呼叫this.props.form.validateFields()就行了。

如果不需要驗證表單，則直接呼叫getFieldsValue獲取值即可。

const form = this.props.form;
const values = form.getFieldsValue();

如果我們已經將表單作為公用子元件分離出去了，那麼在父元件中我們又需要能獲取到子元件的表單的值，這時我們可以在子元件中定義一個方法專門獲取表單的值，然後在父元件中使用屬性wrappedComponentRef使我們能夠隨時呼叫子元件的表單取值方法。

子元件中：

getValues = () => {
    const form = this.props.form;
    const values = form.getFieldsValue();
    return values ;
}

父元件中:

1）先使用wrappedComponentRef獲取到子元件表單：

<MyForm wrappedComponentRef={(form) => this.myForm = form}></MyForm >

2）然後呼叫子元件的取值方法：

//這裡的myForm就是上面 1）中wrappedComponentRef裡面的myForm，屬於自定義名稱
const values = this.myForm .getValues(); 

更多的表單驗證規則和校驗相關api請參考：https://ant.design/components/form-cn/ 。

3. DatePicker取值賦值

我們都知道，在與後臺互動的時候我們獲取的時間很可能是YYYY-MM-DD格式的字串，但在antd中，它的日期元件的值型別確實moment的，這時如果直接給datepicker賦預設值是會報錯的。

所以，在賦值之前，我們需要使用moment。

程式碼如下：
1）先引入moment

import moment from 'moment';

2）為datepicker賦值

{getFieldDecorator('name', {
    initialValue: moment('2018-12-19'),
    rules: [ { // 驗證規則
        required: true, message: '請選擇時間',
    }]
})(
    <DatePicker style={{width: '100%'}} format={dateFormat} />
)}

如果是RangePicker的話，再賦值預設值的時候，可以傳入時間陣列

{getFieldDecorator('rangedate', {
    initialValue: [moment(), moment()] //預設當天
})(
    <RangePicker
        format={dateFormat}
    />
)}

同理，在datepicker取值的時候，我們獲取到的也是moment時間，如果需要轉成YYYY-MM-DD格式的時間提交給後臺，則需要使用moment中的api了。

import moment from 'moment';
const dateFormat = 'YYYY-MM-DD';
// momentDate為獲取到的moment時間值
const formatDate = moment(momentDate).format(dateFormat)

來源：https://blog.csdn.net/qq_33036599/article/details/85090647