react项目中antd组件库的使用需要注意的问题
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