基于react开发的时间选择组件（TimePicker）
发布时间：2020-12-15 07:23:01 所属栏目：百科 来源：网络整理
导读：自从学习了react后一直琢磨写点项目什么之类的来练练手，恰好公司现在的项目还不是很大，足够我用react进行重构。最开始的时候是想自己去开发组件，后来发现有更好的antd这个东东就放弃了自己开发组件直接将antd的组件拿过来用，感觉挺好用的，直到最近对时
|
自从学习了react后一直琢磨写点项目什么之类的来练练手，恰好公司现在的项目还不是很大，足够我用react进行重构。最开始的时候是想自己去开发组件，后来发现有更好的antd这个东东就放弃了自己开发组件直接将antd的组件拿过来用，感觉挺好用的，直到最近对时间选择器TimePicker这个组件进行实践的时候，发现这个组件的api特别难用（貌似还有bug，应该是我的错觉。。。），所以决定自己开发一个类似的时间选择器来锻炼自己。 <div className="my-TimePicker-wrapper">
<div className="my-TimePicker-header">
<span class="ant-time-picker ">
<input className="ant-time-picker-input" />
</span>
</div>
<div className="my-TimePicker-content">
<div className="my-TimePicker-content-box">
<ul className="my-TimePicker-content-menu" >
{
// 你的小时循环遍历
}
</ul>
</div>
<div className="my-TimePicker-content-box">
<ul className="my-TimePicker-content-menu">
{
// 你的分钟循环遍历
}
</ul>
</div>
</div>
</div>
很简单的一段静态结构，css方面抄了antd的一点，自己写了一点，此处不在过多的去描述，各位童鞋可以自己去写适合自己的。嗯，静态结构搭建完毕后下面就是关键的三个部分的描述，也就是输入框的匹配，点击小时和分钟后的事件描述。
关键代码实现如下： // 以小时为例：
hourClick = (e) => {
let target = e.target,obj = this,selectedHour = target.innerHTML,selectedMinute = obj.selectedMinute;
if(target.className === "my-TimePicker-time-selected-disabled"){
// 判断用户点击值是否合法，此处我时判断是否为禁用状态
return ;
}
if(obj.prevHourSelected){
// 判断用户是否已经点击过其他元素，有则将选中清空
obj.prevHourSelected.className = "";
}
// 将此次点击设为选中
target.className = "你的选中类名";
// 将此次点击设置为上一次选中
obj.prevHourSelected = target;
obj.selectedHour = selectedHour;
obj.animateTop(selectedHour,selectedMinute,obj.time); // 简易的点击速度动画
if(selectedMinute !== ""){
// 判断用户的是否同时点击过分钟，若存在则设置输入框的值
}
if(obj.props.onChange){
// 用户的回调函数执行
}
}
第二块，输入框输入时间时的实现思路和步骤：
if(value.length !== 0){
if(value.trim().length === 5){ // 符合长度要求后进行正则验证
if(obj.reg.test(value)){
let hour = +value.split(":")[0],minute = +value.split(":")[1];
// 获取输入值所在的选项的样式
...
if(obj.prevHourSelected){ // 如果上一次存在选中的时间就清空选中样式
xxx.className = "";
}
if(obj.prevMinuteSelected){ // 如果上一次存在选中的时间就清空选中样式
xxx.className = "";
}
// 如果所选值不是禁止选中，就添加选中样式，并且启用滚动效果
if(hourClass.indexOf("my-TimePicker-time-selected-disabled") === -1 && minuteClass.indexOf("my-TimePicker-time-selected-disabled") === -1){
xxx.className = hourClass + " my-TimePicker-time-selected";
xxx.className = minuteClass + " my-TimePicker-time-selected";
obj.animateTop(hour,minute,obj.time);
//添加此次输入为上一次选中
obj.prevHourSelected = xxx;
obj.prevMinuteSelected = xxx;
obj.selectedHour = hour;
obj.selectedMinute = minute;
if(obj.props.onChange){ // 用户是否绑定了自定义onChange
// 执行回调
}
}else{ // 输入为禁用数时清空值
input(输入框的对象).value = "";
}
}
}
}else{
// 删除操作，清空所有值，选中和变量存放到值
}
第三块，用户设置默认值的设置，componentDidMount进行判断和设置，然后每次用户更新state是在shouldComponentUpdate判断是否值是否合法（此处代码和之前较相似不在贴出关键代码实现）：
第四块，componentWillReceiveProps，用户在外部更新组件到state后的操作，根据个人需求来，我这里主要描述用户设置或选择的值是否为禁用的值
解释不用state设置值：使用state设置文本框值，会出现无法删除文本框的值（不知道你们会不会有这种情况，我这里会有，所以我没有用state）,应该是跟react的虚拟dom有关，用户在界面上的操作在js没有更新state的情况下应该会始终保持state值不变。 写在最后：本人react菜鸟一枚，第一次分享自己做的东西的思路难免出现大量的纰漏或者疏忽，望谅解，所以也是希望和各位相互交流，如有大神指点本人表示热烈欢迎。本人不吝啬各位指点，无论水平高低，只要有好的想法或者更好的实现方式都可以和本人交流。。。欢迎回复我。。。 组件代码示例： import React from 'react';
import ReactDOM from 'react-dom';
class MyTimePicker extends React.Component {
constructor(props){
super(props);
this.valueHeight = 28; // 时间值的高度
this.reg = /^((20|21|22|23|[0-1]d):[0-5][0-9])$/; // 验证时间格式是否正确
this.handleHour = null; // 小时滚动定时器
this.handleMinute = null; // 分钟滚动定时器
this.prevHourSelected = null; // 上一级选择的小时
this.prevMinuteSelected = null; // 上一次选择的分钟
this.selectedHour = ""; // 选中的小时
this.selectedMinute = ""; // 选中的分钟
this.time = 50; // 滚动时间频率
if(props.onChange){ // 如果用户使用了自定义onChange，就将用户的onChange赋值给本地的setChange属性
this.setChange = props.onChange;
}
}
state = {
disabledHours: this.props.disabledHours,// 禁用的小时数组
disabledMinutes: this.props.disabledMinutes,// 禁用的分钟数组
isShow: false,// 是否显示选择框
}
setChange(hour,minute){} // 构造本地的change方法接受用户自定义方法
range(start,end){ // 构造时间
if(typeof start !== "number" || typeof end !== "number" || start >= end){
return [];
}
let arr = [];
for(let i = start; i <= end; i++){
arr.push(i);
}
return arr;
}
onChange(e){
e.stopPropagation();
let obj = this,value = e.target.value.trim();
if(value.length !== 0){
if(value.trim().length === 5){ // 符合长度要求后进行正则验证
if(obj.reg.test(value)){
let hour = +value.split(":")[0],minute = +value.split(":")[1];
// 获取输入值所在的选项的样式
let hourClass = obj.refs['my-Timepicker-hour'].children[0].children[hour].className;
let minuteClass = obj.refs['my-Timepicker-minute'].children[0].children[minute].className;
if(obj.prevHourSelected){ // 如果上一次存在选中的时间就清空选中样式
obj.refs['my-Timepicker-hour'].children[0].children[+obj.prevHourSelected.innerHTML].className = "";
}
if(obj.prevMinuteSelected){ // 如果上一次存在选中的时间就清空选中样式
obj.refs['my-Timepicker-minute'].children[0].children[+obj.prevMinuteSelected.innerHTML].className = "";
}
// 如果所选值不是禁止选中，就添加选中样式，并且启用滚动效果
if(hourClass.indexOf("my-TimePicker-time-selected-disabled") === -1 &&
minuteClass.indexOf("my-TimePicker-time-selected-disabled") === -1){
obj.refs['my-Timepicker-hour'].children[0].children[hour].className = hourClass + " my-TimePicker-time-selected";
obj.refs['my-Timepicker-minute'].children[0].children[minute].className = minuteClass + " my-TimePicker-time-selected";
obj.animateTop(hour,obj.time);
//添加此次输入为上一次选中
obj.prevHourSelected = obj.refs['my-Timepicker-hour'].children[0].children[hour];
obj.prevMinuteSelected = obj.refs['my-Timepicker-minute'].children[0].children[minute];
obj.selectedHour = hour;
obj.selectedMinute = minute;
if(obj.props.onChange){ // 用户是否绑定了自定义onChange
obj.setChange(hour,minute);
}
}else{ // 输入为禁用数时清空值
obj.refs['my-Timepicker-text'].value = "";
}
}else{ // 置空
e.target.value = "";
}
}
}else{
obj.prevHourSelected = null; // 上一级选择的小时
obj.prevMinuteSelected = null; // 上一次选择的分钟
obj.selectedHour = ""; // 选中的小时
obj.selectedMinute = ""; // 选中的分钟
let hourList = obj.refs['my-Timepicker-hour'].children[0].children,minuteList = obj.refs['my-Timepicker-minute'].children[0].children;
for(let i = 0,len = hourList.length; i < len; i++){
if(hourList[i].className === "my-TimePicker-time-selected"){
hourList[i].className = "";
break;
}
}
for(let i = 0,len = minuteList.length; i < len; i++){
if(minuteList[i].className === "my-TimePicker-time-selected"){
minuteList[i].className = "";
break;
}
}
obj.animateTop(0,obj.time);
if(obj.props.onChange){ // 用户是否绑定了自定义onChange
obj.setChange("","");
}
}
}
/*
* 小时/分钟点击效果
* 参数&变量说明：
* 参数：e -> 小时选中对象(当前或者上一次)
* 变量：selectedHour -> 当前选中小时，selectedMinute -> 当前选中分钟
* 1、如果是禁止选择的时间，return
* 2、如果上一次存在选中的时间就清空选中样式
* 3、通过前两次判断后添加当前选择为选中，设置当前选中小时
* 4、添加本次选中为上次选中
* 5、添加选中动画
* 6、如果小时和分钟同时选中，则设置文本框值
* 7、如果小时和分钟同时选中则启用回调
*/
hourClick = (e) => {
let target = e.target,selectedMinute = obj.selectedMinute;
if(target.className === "my-TimePicker-time-selected-disabled"){
return ;
}
if(obj.prevHourSelected){
obj.prevHourSelected.className = "";
}
target.className = "my-TimePicker-time-selected";
obj.prevHourSelected = target;
obj.selectedHour = selectedHour;
obj.animateTop(selectedHour,obj.time);
if(selectedMinute !== ""){
obj.refs['my-Timepicker-text'].value = selectedHour+":"+selectedMinute;
}
if(obj.props.onChange){
obj.setChange(+selectedHour,selectedMinute);
}
}
minuteClick = (e) => {
let target = e.target,selectedHour = obj.selectedHour,selectedMinute = target.innerHTML;
if(target.className === "my-TimePicker-time-selected-disabled"){
return ;
}
if(obj.prevMinuteSelected){
obj.prevMinuteSelected.className = "";
}
target.className = "my-TimePicker-time-selected";
obj.prevMinuteSelected = target;
obj.selectedMinute = selectedMinute;
obj.animateTop(selectedHour,obj.time);
if(selectedHour !== ""){
obj.refs['my-Timepicker-text'].value = selectedHour+":"+selectedMinute;
}
if(obj.props.onChange){
obj.setChange(selectedHour,+selectedMinute);
}
}
animateTop(hour,time){ // 时间滚动效果
let obj = this,curHourTop = obj.refs['my-Timepicker-hour'].scrollTop,// 当前小时的滚动高度
curMinuteTop = obj.refs['my-Timepicker-minute'].scrollTop; // 当前分钟的滚动高度
clearInterval(obj.handleHour);
clearInterval(obj.handleMinute);
// 不为空就转成数字
hour = (hour === "")?"":+hour;
minute = (minute === "")?"":+minute;
// 判断是否进行动画
if(curHourTop !== obj.valueHeight*hour && hour !== ""){
obj.handleHour = setInterval(() => {
let getTop = obj.refs['my-Timepicker-hour'].scrollTop,// 实时获取滚动高度
result = getTop - obj.valueHeight*hour,// 实时计算滚动高度差
speed = Math.floor(result/3); // 实时计算滚动的正负速度
if(speed !== 0){ // 如果滚动高度差绝对值大于0，始终滚动
obj.refs['my-Timepicker-hour'].scrollTop = getTop - speed;
}else{ // 反之，停止滚动
obj.refs['my-Timepicker-hour'].scrollTop = obj.valueHeight*hour; // 速度等于0时，手动修正动画误差
clearInterval(obj.handleHour);
}
},time);
}
if(curMinuteTop !== obj.valueHeight*minute && minute !== ""){
obj.handleMinute = setInterval(() => {
let getTop = obj.refs['my-Timepicker-minute'].scrollTop,// 实时获取滚动高度
result = getTop - obj.valueHeight*minute,// 实时计算滚动高度差
speed = Math.floor(result/2); // 实时计算滚动的正负速度
if(speed !== 0){ // 如果速度不等于0，始终滚动
obj.refs['my-Timepicker-minute'].scrollTop = getTop - speed;
}else{ // 反之，停止滚动
obj.refs['my-Timepicker-minute'].scrollTop = obj.valueHeight*minute; // 速度等于0时，手动修正动画误差
clearInterval(obj.handleMinute);
}
},time);
}
}
componentDidMount(){
let obj = this,value = obj.props.defaultValue;
if(value !== "" && obj.reg.test(value)){
let hour = +value.split(":")[0],minute = +value.split(":")[1],hourObj = obj.refs['my-Timepicker-hour'].children[0].children[hour],minuteObj = obj.refs['my-Timepicker-minute'].children[0].children[minute],hourClass = hourObj.className,minuteClass = minuteObj.className;
obj.refs['my-Timepicker-text'].value = obj.props.defaultValue;
obj.prevHourSelected = hourObj; // 上一级选择的小时
obj.prevMinuteSelected = minuteObj; // 上一次选择的分钟
obj.selectedHour = hour; // 选中的小时
obj.selectedMinute = minute; // 选中的分钟
obj.animateTop(hour,obj.time);
if(obj.props.onChange){
obj.setChange(hour,minute);
}
}
}
// 已加载组件首次渲染完毕后，父组件更新state自动调用次方法重新传入props，接受值后刷新禁用值,判断选中的值是否在禁用中存在
componentWillReceiveProps(nextProps){
let obj = this,getHour = obj.selectedHour,getMinute = obj.selectedMinute;
if(nextProps.disabledHours.indexOf(getHour) === -1 && nextProps.disabledMinutes.indexOf(getMinute) === -1){
this.setState({
disabledHours: nextProps.disabledHours,disabledMinutes: nextProps.disabledMinutes,});
}else{
obj.reset();
}
}
reset = () => { // 重置所有值和选择
let obj = this;
obj.refs['my-Timepicker-text'].value = "";
obj.prevHourSelected = null; // 上一级选择的小时
obj.prevMinuteSelected = null; // 上一次选择的分钟
obj.selectedHour = ""; // 选中的小时
obj.selectedMinute = ""; // 选中的分钟
let hourList = obj.refs['my-Timepicker-hour'].children[0].children,minuteList = obj.refs['my-Timepicker-minute'].children[0].children;
obj.setState({
disabledHours: [],disabledMinutes: [],});
obj.animateTop(0,obj.time);
}
onMouseMove = (e) => {
this.setState({ isShow: true });
}
onMouSEOut = (e) => {
this.setState({ isShow: false });
}
render(){
let obj = this;
return(
<div className="my-TimePicker-wrapper" onMouseMove={obj.onMouseMove} onMouSEOut={obj.onMouSEOut}>
<div className="my-TimePicker-header">
<span class="ant-time-picker ">
<input id={obj.props.id} placeholder={obj.props.placeholder}
ref="my-Timepicker-text" className="ant-time-picker-input"
onChange={obj.onChange.bind(this)} />
</span>
</div>
<div style={{ height:(obj.state.isShow)?"138px":"0px" }} ref="my-Timepicker-content" className="my-TimePicker-content">
<div ref="my-Timepicker-hour" className="my-TimePicker-content-box">
<ul className="my-TimePicker-content-menu" onClick={obj.hourClick} >
{
obj.range(0,23).map((cur,index) => {
let getHour = cur,setClass = "";
obj.state.disabledHours.map((cur1,index1) => {
if(getHour === cur1){
setClass = "my-TimePicker-time-selected-disabled"
}
})
return <li className={ setClass } key={index} >{(cur < 10)?"0"+cur:cur}</li>
})
}
</ul>
</div>
<div ref="my-Timepicker-minute" className="my-TimePicker-content-box">
<ul className="my-TimePicker-content-menu" onClick={obj.minuteClick} >
{
obj.range(0,59).map((cur,setClass = "";
obj.state.disabledMinutes.map((cur1,index1) => {
if(getHour === cur1){
setClass = "my-TimePicker-time-selected-disabled"
}
})
return <li className={ setClass } key={index} >{(cur < 10)?"0"+cur:cur}</li>
})
}
</ul>
</div>
</div>
</div>
)
}
}
MyTimePicker.propTypes = {
id: React.PropTypes.string,defaultValue: React.PropTypes.string,// 默认值
placeholder: React.PropTypes.string,disabledHours: React.PropTypes.array,// 禁用的小时数组
disabledMinutes: React.PropTypes.array // 禁用的分钟数组
};
MyTimePicker.defaultProps = {
id: "",defaultValue: "",placeholder: "请选择时间",disabledHours: [],disabledMinutes: []
}
export default MyTimePicker;
使用实例： /*
* 参数说明：hour -> 回调小时，minute -> 回调分钟
* 变量说明：obj -> 当前上下文,endHourArr -> 禁用结束小时数组，endMinuteArr -> 禁用结束分钟数组，
* startMinuteArr -> 禁用开始分钟数组，preEndHour -> 上一次选中的结束小时
* preEndMinute -> 上一次选中的结束分钟
* 方法说明：选中时间后的回调方法，start和end是开始与结束，两个方法功能相同
* 1、只选中时间时，返回禁用的小时（不包括选中的小时）
* 2、判断时间和分钟是否同时选中，返回禁用的小时数组，根据分钟的位置决定小时是否进退
* 3、在时间和分钟同时选中时，继续判断是否存在已经选中的开始/结束小时并判断是否和当前选中小时相等，返回禁用的分钟数组
* 4、判断开始/结束小时和分钟是否选中，并判断开始/结束小时否和当前小时相等，返回当前元素需要禁用的分钟数组
*/
changeStartTime(hour,minute){
let obj = this,endHourArr = [],endMinuteArr = [],startMinuteArr = [],preEndHour = obj.endHour,preEndMinute = obj.endMinute;
if(hour !== ""){
endHourArr = obj.range(0,+hour,"<");
}
if(hour !== "" && minute !== ""){
endHourArr = (+minute === 59)?obj.range(0,+hour):obj.range(0,"<");
if(preEndHour !== "" && parseInt(preEndHour) === parseInt(hour)){
endMinuteArr = obj.range(0,+minute);
}
}
if(hour !== "" && preEndHour !== "" && preEndMinute !== "" && parseInt(preEndHour) === parseInt(hour)){
startMinuteArr = obj.range(+preEndMinute,59);
}
obj.startHour = hour;
obj.startMinute = minute;
obj.setState({
disabledStartMinutes: startMinuteArr,disabledEndHours: endHourArr,disabledEndMinutes: endMinuteArr,});
} （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |