react项目中antd组件库的使用需要注意的问题

Love The Way You Lie 2022-04-08 19:08 381阅读 0赞

antd是蚂蚁金服推出的ui组件库，给我们在react项目开发中提供了大大的便利。但在使用的过程中，或多或少的会遇到一些问题，毕竟，用的是别人的东西，就得遵守别人的规则嘛！官方文档：[https://ant.design/docs/react/introduce-cn][https_ant.design_docs_react_introduce-cn]

## 1. 国际化（中文化） ##

通过官方文档我们可以知道，很多组件如DatePicker、Modal等等默认的文本都是英文。如果是输入框的提示文字我们可以通过组件的`placeholder`属性来自定义；如果是模态框底部按钮的文字我们也可以通过模态框组件提供的`cancelText` 、`okText` 等属性来自定义，那如果是时间插件弹出的日历选择里面的标题日期呢？又或是穿梭框的项数总计？诸如此类…  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDM2NTk5_size_16_color_FFFFFF_t_70]  
其实，我们只需要在需要中文化的组件外面包裹组件 `<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/][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/][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_ant.design_docs_react_introduce-cn]: https://ant.design/docs/react/introduce-cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDM2NTk5_size_16_color_FFFFFF_t_70]: /images/20220404/abf0506fbdcd401ea488b6bb5a809a2c.png
[https_ant.design_components_locale-provider-cn]: https://ant.design/components/locale-provider-cn/
[https_ant.design_components_form-cn]: https://ant.design/components/form-cn/