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.cr