react項目中antd組件庫的使用需要注意的問題

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

1. 國際化（中文化）

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

其實，我們只需要在需要中文化的組件外面包裹組件 <LocaleProvider></LocaleProvider>組件即可。

代碼如下（以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)