timepicker組件在reactjs

Question

我開發了一個簡單的timepicker組件。

該組分的功能是

a）證明在兩個12小時格式和24小時格式

b）中，用戶可以選擇時，分，時的時間，下午

c）在發送時間到服務器，時間應該是24小時格式

現在我看到的錯誤是在初始加載時，如果時間是PM格式，則24小時時間不顯示

任何人都可以查看代碼並幫助我改進我的代碼並修復那個錯誤嗎？

下面是一個演示

import React from "react"; 
import moment from "moment"; 
import "./time.css"; 

class TimePicker extends React.PureComponent { 
    constructor(props) { 
    super(props); 
    this.calculateMeridian(props.time); 
    this.state = { 
     time: this.convertTime(props.time), 
     hour: this.calculateHour(props.time), 
     hourTime: this.convertTime(props.time), 
     selectedNumber: 1, 
     meridian: this.calculateMeridian(props.time), 
     minutes: this.calculateMinutes(props.time), 
     hasError: false 
    }; 
    } 

    convertTime = time => { 
    const splittedTime = time && time.split(":"); 
    const hour = splittedTime && splittedTime[0]; 
    if (hour > 12) { 
     // const hour = time.split(':')[0]; 
     const momentInstance = moment(time, "hhmm"); 
     const twelveHourTime = momentInstance.format("h:mm"); 
     console.log("twelveHourTime", twelveHourTime); 
     return twelveHourTime; 
    } 

    return time; 
    }; 

    calculateMinutes = time => { 
    const splittedTime = time && time.split(':'); 
    console.log('minutes', splittedTime); 
    return splittedTime[1].split(' ')[0]; 
    } 

    calculateHour = time => { 
    const splittedTime = time && time.split(':'); 
    return splittedTime[0]; 
    } 

    calculateMeridian = time => { 
    const splittedTime = time && time.split(':')[1].split(' '); 
    console.log('splitted time', splittedTime); 
    return splittedTime[1]; 
    } 

    handleClick(time) { 
    const { meridian, minutes } = this.state; 
    const hourTime = moment(`${time}:${minutes}`, [ 
     "hhmm A" 
    ]).format("h:mm"); 
    this.setState(
     { 
     time, 
     hour: time, 
     selectedNumber: time, 
     hourTime 
     }, 
    () => this.props.onClick(hourTime) 
    ); 
    } 

    handleTimeAmPm(meridian) { 
    const { time, minutes, hour } = this.state; 
    const hourTime = moment(`${hour}:${minutes} ${meridian}`, [ 
     "h:mm A" 
    ]).format("h:mm"); 
    console.log('hourTime', hourTime); 
    this.setState({ meridian, hourTime },() => this.props.onClick(this.state.hourTime)); 
    } 

    handleMinutes = e => { 
    const { value, min, max } = e.target; 
    if (value >= min && value < max) { 
     const hourTime = moment(
     `${this.state.hour}:${value}}`, 
     ["hhmm"] 
    ).format("h:mm a"); 
     if (value.length < 2) { 
     this.setState({ minutes: "0" + value.slice(-2), hourTime },() => 
      this.props.onClick(this.state.hourTime) 
     ); 
     } else { 
     this.setState({ minutes: value.slice(-2), hourTime },() => 
      this.props.onClick(this.state.hourTime) 
     ); 
     } 
    } else { 
     this.setState({ minutes: "00", hasError: true }); 
    } 
    }; 

    render() { 
    let time = []; 
    for (let i = 1; i <= 12; i++) { 
     time.push(
     <div 
      className={this.state.selectedNumber === i ? "hand selected" : "hand"} 
      key={i} 
      onClick={() => this.handleClick(i)} 
     > 
      {i} 
     </div> 
    ); 
    } 
    console.log('time', this.state.hourTime); 
    return (
     <div className="card card-md" style={{ width: "100%", maxWidth: "100%" }}> 
     <div className="time-date"> 
      <div className="display"> 
      <div className="content"> 
       <div className="main-title"> 
       {this.state.hour}:{this.state.minutes}{this.state.meridian} 
       </div> 
      </div> 
      </div> 
      <div className="control"> 
      <div className="slider"> 
       <div className="time-control"> 
       <div className="clock"> 
        <div className="clock-face"> 
        <div className="center" /> 
        {time} 
        </div> 
       </div> 
       <div className="actions"> 
        <div className="am" onClick={() => this.handleTimeAmPm("am")}> 
        am 
        </div> 
        <div className="minutes"> 
        <div className={this.state.hasError && "input error"}> 
         <input 
         type="number" 
         min={0} 
         max={60} 
         value={this.state.minutes} 
         onChange={this.handleMinutes} 
         /> 
        </div> 
        </div> 
        <div className="pm" onClick={() => this.handleTimeAmPm("pm")}> 
        pm 
        </div> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

export default TimePicker; 

DEMO

https://codesandbox.io/s/o53r9nr9z5

Answer 1

只需調用內部componentDidMount您的AM/PM處理器的代碼。

componentDidMount() { 
    this.handleTimeAmPm(this.state.meridian); 
}