想要通过使用 Date 类在 React 上设置小时、分钟和秒来更新日期时间答案

【问题标题】：Want to update Date time by setting the hours, minutes, and seconds on React using Date class想要通过使用 Date 类在 React 上设置小时、分钟和秒来更新日期时间
【发布时间】：2022-11-10 23:43:18
【问题描述】：

因此，当我单击标题时，我试图通过提示更新小时、分钟和秒值，但我无法这样做。有人可以帮忙吗？

我曾尝试使用 Date 类中的设置器，但没有运气。我相信它与 componentWillMount() 有关，但我不确定如何解决它。

import React, { Component } from 'react'



class Clock extends Component {

  constructor()
  {
       super()
       this.state = {time:new Date()}
  }
 
 componentWillMount(){
      setInterval(() => this.setState({time:new Date()}),1000)
      //setInterval(() => this.state.time.setSeconds(1),1000);
       
  }

  setHour(){
   // alert("This is the hour");  
     let hour = prompt("Enter the hour you would like to change to" , 12);

       //! Not working
     this.state.time.setHours(hour);

  }

  setMinutes(){
     //alert("This is the minutes");       
     let minutes = prompt("Enter the minutes you would like to change to" , 30);

       //! Not working
     this.state.time.setHours(minutes);
  }

  setSeconds(){
     //alert("This is the seconds");     
     let seconds = prompt("Enter the seconds you would like to change to" , 35);

     //! Not working
     this.state.time.setHours(seconds);
      
  }
  
     render() {
    return (
      <div style={{border: '5px solid black', textAlign: 'center', width: '30%',}}>
           
           
           <h4 style={{margin: '10px'}} >London Clock  </h4>
           <h4  onClick={this.setHour} style={{display: 'inline'}}>{this.state.time.toLocaleTimeString().slice(0,1)} : </h4>
           <h4  onClick={this.setMinutes} style={{display: 'inline'}}>{this.state.time.toLocaleTimeString().slice(2,4)} : </h4>
           <h4  onClick={this.setSeconds} style={{display: 'inline'}}>{this.state.time.toLocaleTimeString().slice(5,8)}</h4>
           <h4  style={{display: 'inline'}}>{this.state.time.toLocaleTimeString().slice(8,10)}</h4>

           {/* Just to take care of the bottom margin of the border */}
           <h1 style={{margin: '10px'}}></h1>
           
           
     </div>
    )
  }
}

export default Clock

Here is the visual of my Clock Component

【问题讨论】：

标签： reactjs date setter

【解决方案1】：

调用 .setHours(hour) 不会通知 React 状态已更改，因为函数调用正在更改 Date 类的数据成员，而 React 不知道更改。要解决此问题，您有两种选择：

拨打.setHours(hour)后拨打this.setState({time: this.state.time})。 setState 函数应该通知 react 发生了一些变化。
做类似的事情
let time = this.state.time; time.setHours(hour); this.setState({time: time});
编辑：您可能希望在 onClick 函数中绑定它，例如
onClick={this.setHour.bind(this)}

【讨论】：

【解决方案2】：

如果你想要它在反应功能组件上，那么，

import React, { useState, useEffect } from "react";

export const DateTime = () => {
  var [date, setDate] = useState(new Date());

  useEffect(() => {
    var timer = setInterval(() => setDate(new Date()), 1000);
    return function cleanup() {
      clearInterval(timer);
    };
  });

  return (
    <div>
      <p> Time : {date.toLocaleTimeString()}</p>
      <p> Date : {date.toLocaleDateString()}</p>
    </div>
  );
};

export default DateTime;

【讨论】：