React Antd Design 组件使用

最新推荐文章于 2024-08-10 07:34:26 发布

hopefullman

最新推荐文章于 2024-08-10 07:34:26 发布

阅读量183

点赞数

分类专栏： react antd 文章标签： Antd React 富文本

本文链接：https://blog.csdn.net/hopefullman/article/details/103178127

版权

这篇博客详细介绍了如何在React项目中使用Antd Design组件库，包括常见组件的功能和使用示例。

摘要由CSDN通过智能技术生成

今天记录一下Antd 里面的一些儿组件用法：

0.写在前面
提示：antd 里面的函数不用bind（this）
import { Input,Button,message  } from 'antd';
import 'antd/dist/antd.css';

1.DatePicker
//本地化 中文化 
import locale from 'antd/es/date-picker/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
//一定日期内不可选择
disabledDate = (current) => {
        return  current < moment(可以传入限制的时间).startOf('day') || current > moment().add(29, 'day')
        return  current < moment().startOf('day') || current > moment().add(29, 'day')
  }
//选择日期的方法会显示日期
onChangeDelay(date, dateString) {
    console.log('日期', dateString+' 00:00:00');
    console.log('日期', dateString);
  }

<DatePicker disabledDate={this.disabledDate} onChange={this.onChangeDelay} showToday={true} locale={locale}/>

2.富文本
import {Editor} from 'react-draft-wysiwyg';
import draftjs from 'draftjs-to-html';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
constructor(props){
    super(props);
    this.state={
      show