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)
来源：https://blog.csdn.net/qq_33036599/article/details/85090647
