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

• Z时代
• 2024-01-10
• 分类：综合

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

posted @ 2018-12-27 17:11 栖息地 阅读(...) 评论(...) 编辑 收藏

以上是 react项目中antd组件库的使用需要注意的问题 的全部内容， 来源链接： utcz.com/z/384042.html