React漫漫学习路之 Ant Design 的使用

ANT DESIGN是由蚂蚁金服体验技术部出品的一个UI组件库。

先来看看官方介绍：在企业级产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。我们经过大量的项目实践和总结，沉淀出一个企业级的 Web 设计指引。旨在统一企业级产品的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。

目前分为基于React实现的web组件库--Ant Design of React和H5组件库AlipayUI of React。本文只讨论web组件库--Ant Design of React中的TimePicker的使用，抛砖引玉，更多组件信息，请访问官网介绍Ant Design of React。

安装

 $ npm install antd 

 

引入样式

 import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' 

 

示例

TimePicker时间选择框

基本的时间选择框

 

import { TimePicker } from 'antd';

class Demo extends React.Component {
  state = {
    value: null,
  };

  onChange = (time) => {
    console.log(time);
    this.setState({ value: time });
  }

  render() {
    return <TimePicker value={this.state.value} onChange={this.onChange} />;
  }
}

 

选择时分

TimePicker 浮层中的列会随着 format 变化，当略去 format 中的某部分时，浮层中对应的列也会消失。

 

import { TimePicker } from 'antd';
import moment from 'moment';

const format = 'HH:mm';

ReactDOM.render(
  <TimePicker defaultValue={moment('12:08', format)} format={format} />
, mountNode);

 

tips

TimePicker组件的value值为moment类型，在使用默认值（例如从服务器获取的字符串数值‘21:30’）需导入moment依赖：

import moment from 'moment';
<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />

 

更多功能如禁用部分选项、禁用整个控件以及在TimePicker 选择框底部显示自定义的内容等请访问完整API。