点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

使用react开发日历组件的方法详解

来源：动视网责编：小采时间：2020-11-27 19:31:41

使用react开发日历组件的方法详解

使用react开发日历组件的方法详解:本篇文章给大家带来的内容是关于php中如何得到小程序传来的json数组数据（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。准备工作提前需要准备好react脚手架开发环境，由于react已经不支持在页面内部通过jsx.transform来

推荐度：

点击下载本文 文档为doc格式

导读使用react开发日历组件的方法详解:本篇文章给大家带来的内容是关于php中如何得到小程序传来的json数组数据（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。准备工作提前需要准备好react脚手架开发环境，由于react已经不支持在页面内部通过jsx.transform来

本篇文章给大家带来的内容是关于php中如何得到小程序传来的json数组数据（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

准备工作

提前需要准备好react脚手架开发环境，由于react已经不支持在页面内部通过jsx.transform来转义，我们就自己大了个简易的开发环境

创建一个文件夹，命名为react-canlendar

cd ./react-canlendar

运行

npm init

一路enter我们得到一个package.json的文件

安装几个我们需要的脚手架依赖包

npm install awesome-typescript-loader typescript webpack webpack-cli -D

安装几个我们需要的类库

npm install @types/react react react-dom --save

基础类库安装完毕，开始构建webpack配置

新建一个目录config，config下面新增一个文件，名字叫做webpack.js

var path = require('path')

module.exports = {
 entry: {
 main: path.resolve(__dirname, '../src/index.tsx')
 },
 output: {
 filename: '[name].js'
 },
 resolve: {
 extensions: [".ts", ".tsx", ".js", ".json"]
 },
 module: {
 rules: [
 {test: /\.tsx?$/, use: ['awesome-typescript-loader']}
 ]
 }
}

还需要创建一个index.html文件，这是我们的入口文件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <p id="root"></p>
 <script src="./dist/main.js"></script>
</body>
</html>

以上环境只是一个极简单的环境，真实环境要比这个复杂的多。

好了，言归正传，我们还是聚焦到日历组件的开发中来吧

创建一个src文件夹，内部创建一个index.tsx文件。

这个入口文件很简单就是一个挂载

import * as React from 'react'
import * as ReactDOM from 'react-dom'

ReactDOM.render((
 <p>
 test
 </p>
), document.getElementById('root'))

ok，打开页面可以看到页面正常显示了test字样。

我们需要创建Calendar组件了。

创建一个components文件夹，内部创建一个Calendar.tsx文件。

import * as React from 'react'

export default class Calendar extends React.Component {
 render() {
 
 return (<p>
 日历
 </p>)
 }
}

在index.tsx中把Calendar.tsx引入，并使用起来。于是index.tsx变成这个样子。

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import Calendar from './components/Calendar'

ReactDOM.render((
 <p>
 <Calendar/>
 </p>
), document.getElementById('root'))

可以看到页面显示了日历字样。

要显示日历，首先需要显示日历这个大框以及内部的一个个小框。实现这种布局最简单的布局就是table了

所以我们首先创建的是这种日历table小框框，以及表头的星期排列。

import * as React from 'react'

const WEEK_NAMES = ['日', '一', '二', '三', '四', '五', '六']
const LINES = [1,2,3,4,5,6]

export default class Calendar extends React.Component {
 render() {
 return (<p>
 <table cellPadding={0} cellSpacing={0} className="table">
 <thead>
 <tr>
 {
 WEEK_NAMES.map((week, key) => {
 return <td key={key}>{week}</td>
 })
 }
 </tr>
 </thead>
 <tbody>
 {
 LINES.map((l, key) => {
 return <tr key={key}>
 {
 WEEK_NAMES.map((week, index) => {
 return <td key={index}>{index}</td>
 })
 }
 </tr>
 })
 }
 </tbody>
 </table>
 </p>)
 }
}

可以看到我们使用了一个星期数组作为表头，我们按照惯例是从周日开始的。你也可以从其他星期开始，不过会对下面的日期显示有影响，因为每个月的第一天是周几决定第一天显示在第几个格子里。

那为什么行数要6行呢？因为我们是按照最大行数来确定表格的行数的，如果一个月有31天，而这个月的第一天刚好是周六。就肯定会显示6行了。

为了显示好看，我直接写好了样式放置在index.html中了，这个不重要，不讲解。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 .table {
 border-collapse:collapse;
 border-spacing:0;
 }
 .table td{
 border: 1px solid #ddd;
 padding: 10px;
 }
 .table caption .caption-header{
 border-top: 1px solid #ddd;
 border-right: 1px solid #ddd;
 border-left: 1px solid #ddd;
 padding: 10px;
 display: flex;
 justify-content: space-between;
 }
 .table caption .caption-header .arrow {
 cursor: pointer;
 font-family: "宋体";
 transition: all 0.3s;
 }
 .table caption .caption-header .arrow:hover {
 opacity:0.7;
 }
 </style>
</head>
<body>
 <p id="root"></p>
 <script src="./dist/main.js"></script>
</body>
</html>

下面就要开始显示日期了，首先要把当前月份的日期显示出来，我们先在组件的state中定义当前组件的状态

state = {
 month: 0,
 year: 0,
 currentDate: new Date()
}

我们定义一个方法获取当前年月，为什么不需要获取日，因为日历都是按月显示的。获取日现在看来对我们没有意义，于是新增一个方法，设置当前组件的年月

setCurrentYearMonth(date) {
 var month = Calendar.getMonth(date)
 var year = Calendar.getFullYear(date)
 this.setState({
 month,
 year
 })
}

static getMonth(date: Date): number{
 return date.getMonth()
}

static getFullYear(date: Date): number{
 return date.getFullYear()
}

创建两个静态方法获取年月，为什么是静态方法，因为与组件的实例无关，最好放到静态方法上去。

要想绘制一个月还需要知道一个月的天数吧，才好绘制吧

所以我们创建一个数组来表示月份的天数

const MONTH_DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] // 暂定2月份28天吧

组件上创建一个函数，根据月份获取天数，也是静态的

static getCurrentMonthDays(month: number): number {
 return MONTH_DAYS[month]
}

下面还有一个重要的事情，就是获取当前月份第一天是周几，这样子就可以决定把第一天绘制在哪里了。首先要根据年月的第一天获得date，根据这个date获取周几。

static getDateByYearMonth(year: number, month: number, day: number=1): Date {
 var date = new Date()
 date.setFullYear(year)
 date.setMonth(month, day)
 return date
 }

这里获得每个月的第一天是周几了。

static getWeeksByFirstDay(year: number, month: number): number {
 var date = Calendar.getDateByYearMonth(year, month)
 return date.getDay()
 }

好了，开始在框子插入日期数字了。因为每个日期都是不一样的，这个二维数组可以先计算好，或者通过函数直接插入到jsx中间。

static getDayText(line: number, weekIndex: number, weekDay: number, monthDays: number): any {
 var number = line * 7 + weekIndex - weekDay + 1
 if ( number <= 0 || number > monthDays ) {
 return <span> </span>
 }

 return number
 }

看一下这个函数需要几个参数哈，第一个行数，第二个列数（周几），本月第一天是周几，本月天数。line * 7 + weekIndex表示当前格子本来是几，减去本月第一天星期数字。为什么+1，因为索引是从0开始的，而天数则是从1开始。那么<0 || >本月最大天数的则过滤掉，返回一个空span，只是为了撑开td。其他则直接返回数字。

import * as React from 'react'

const WEEK_NAMES = ['日', '一', '二', '三', '四', '五', '六']
const LINES = [1,2,3,4,5,6]
const MONTH_DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

export default class Calendar extends React.Component {
 state = {
 month: 0,
 year: 0,
 currentDate: new Date()
 }

 componentWillMount() {
 this.setCurrentYearMonth(this.state.currentDate)
 }

 setCurrentYearMonth(date) {
 var month = Calendar.getMonth(date)
 var year = Calendar.getFullYear(date)
 this.setState({
 month,
 year
 })
 }

 static getMonth(date: Date): number{
 return date.getMonth()
 }

 static getFullYear(date: Date): number{
 return date.getFullYear()
 }

 static getCurrentMonthDays(month: number): number {
 return MONTH_DAYS[month]
 }

 static getWeeksByFirstDay(year: number, month: number): number {
 var date = Calendar.getDateByYearMonth(year, month)
 return date.getDay()
 }

 static getDayText(line: number, weekIndex: number, weekDay: number, monthDays: number): any {
 var number = line * 7 + weekIndex - weekDay + 1
 if ( number <= 0 || number > monthDays ) {
 return <span> </span>
 }

 return number
 }

 static formatNumber(num: number): string {
 var _num = num + 1
 return _num < 10 ? `0${_num}` : `${_num}`
 }

 static getDateByYearMonth(year: number, month: number, day: number=1): Date {
 var date = new Date()
 date.setFullYear(year)
 date.setMonth(month, day)
 return date
 }

 checkToday(line: number, weekIndex: number, weekDay: number, monthDays: number): Boolean {
 var { year, month } = this.state
 var day = Calendar.getDayText(line, weekIndex, weekDay, monthDays)
 var date = new Date()
 var todayYear = date.getFullYear()
 var todayMonth = date.getMonth()
 var todayDay = date.getDate()

 return year === todayYear && month === todayMonth && day === todayDay
 }

 monthChange(monthChanged: number) {
 var { month, year } = this.state
 var monthAfter = month + monthChanged
 var date = Calendar.getDateByYearMonth(year, monthAfter)
 this.setCurrentYearMonth(date)
 }

 render() {
 var { year, month } = this.state
 console.log(this.state)

 var monthDays = Calendar.getCurrentMonthDays(month)
 var weekDay = Calendar.getWeeksByFirstDay(year, month)

 return (<p>
 {this.state.month}
 <table cellPadding={0} cellSpacing={0} className="table">
 <caption>
 <p className="caption-header">
 <span className="arrow" onClick={this.monthChange.bind(this, -1)}><</span>
 <span>{year} - {Calendar.formatNumber(month)}</span>
 <span className="arrow" onClick={this.monthChange.bind(this, 1)}>></span>
 </p>
 </caption>
 <thead>
 <tr>
 {
 WEEK_NAMES.map((week, key) => {
 return <td key={key}>{week}</td>
 })
 }
 </tr>
 </thead>
 <tbody>
 {
 LINES.map((l, key) => {
 return <tr key={key}>
 {
 WEEK_NAMES.map((week, index) => {
 return <td key={index} style={{color: this.checkToday(key, index, weekDay, monthDays) ? 'red' : '#000'}}>
 {Calendar.getDayText(key, index, weekDay, monthDays)}
 </td>
 })
 }
 </tr>
 })
 }
 </tbody>
 </table>
 </p>)
 }
}

可以看到最终的代码多了一些东西，因为我加了月份的切换。

还记的上文我们把二月份天数写死的18天嘛？要不你们自己改改，判断一下闰年。

使用react开发日历组件的方法详解

推荐度：

点击下载本文 文档为doc格式

标签：日历日历控件 React

热门焦点

使用react开发日历组件的方法详解

使用react开发日历组件的方法详解

使用react开发日历组件的方法详解

最新推荐

猜你喜欢

热门推荐