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
react项目中antd组件库的使用需要注意的问题的更多相关文章
- 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。
react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...
- react项目中使用less并修改antd主题样式
一.react项目中使用less 1. 安装配置 npm i -D less less-loader 2. 查看webpack配置 npm run eject 此操作不可逆,生成新的目录. 3. 修改 ...
- Antd组件库,利用Menu组件模拟一个简单Tree组件
当前工作中,前端的主要技术栈用是vue. 那React怎么办呢?总不至于把他扔在墙角吧! 只能在一些很小的项目上,也只有自己一个前端的时候,悄悄的上React. 当然,React项目UI组件还是最喜欢 ...
- react项目使用antd
在开始实践之前要确保搭建React单页面开发环境,如果还没有搭建好开发环境的朋友请移步到如何搭建React单页面开发环境. 首先在命令行模式下创建一个React项目(项目名使用小写字母命名):(win ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- 了解CSS in JS(JSS)以及在React项目中配置并使用JSS
目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- react项目中实现元素的拖动和缩放实例
在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...
- React项目中实现右键自定义菜单
最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...
随机推荐
- Ubuntu 下修改 Could not reliably determine the server’s fully qualified domain name, using 127.0.1.1 for ServerName
在Ubuntu上安装Apache,每次重启,都会出现以下错误提示: Could not reliably determine the server’s fully qualified domain n ...
- PHP面试题及答案解析(4)—PHP核心技术
1.写出一个能创建多级目录的PHP函数. <?php /** * 创建多级目录 * @param $path string 要创建的目录 * @param $mode int 创建目录的模式,在 ...
- Selenium3.X 与 Javascript (Nodejs)
传送门 # 官网网站 http://docs.seleniumhq.org/download/ # API DOC http://goo.gl/hohAut # 慕课网教程http://www.imo ...
- Junit的各种断言
JUnit为我们提供了一些辅助函数,他们用来帮助我们确定被测试的方法是否按照预期的效果正常工作,通常,把这些辅助函数称为断言.下面我们来介绍一下JUnit的各种断言. 1.assertEquals 函 ...
- spring事务管理实现方式
声明式事务 tx及aop配置,利于管理,耦合性低,可读性低 @Transactional注解,不利管理,耦合性高,可读性高 编程式事务 TransactionTemplate类,spring推荐方法 ...
- 利用SQL server 的复制功能分散用户访问服务器的负载
先来了解一下一个基本的关于复制的概念. 什么是复制? 复制就是把数据的多个拷贝(复制品)分发到公司中的各个服务器中,通过复制为多台服务器提供相同的数据.这样用户就可以在不同服务器中访问同样的信息. 对 ...
- Java以指定格式输入数字
package com.ylx; import java.text.DecimalFormat; public class Test { public static void main(String[ ...
- windows_64下python下载安装Numpy、Scipy、matplotlib模块
本文应用的python3.6.3及其对应的Numpy.Scipy.matplotlib计算模块的cp36版本,其中Numpy是需要MKL版本的Numpy,这是后续安装Scipy的需要(本机系统win7 ...
- Apache中KeepAlive 配置
引子 先来分析一个Yslow 测试的一个页面的前端性能. 这里所有的请求是指http请求,对于一个请求各个阶段的划分,阻挡->域名解析->建立连接->发送请求->等待响应-&g ...
- RecyclerView加载更多用notifyDataSetChanged()刷新图片闪烁
首先来看看对比ListView看一下RecyclerView的Adapter主要增加了哪些方法: notifyItemChanged(int position) 更新列表position位置上的数据可 ...