React 本地小时输入 - Javascript

在React中，我们可以使用内置的Date对象来处理和操作时间。通过该对象，我们可以轻松地获取当前时间和日期。

获取小时数

要获取本地小时数，可以使用Date对象的getHours()方法。该方法将返回一个0到23之间的整数，分别表示当前时间的小时数。

以下是一个获取本地小时数的示例代码：

const currentTime = new Date();
const currentHour = currentTime.getHours();

输出结果：

13

输入小时数

要让用户输入小时数，我们可以使用React的表单组件。以下是一个基本示例：

import { useState } from 'react';

function HourInput() {
  const [hour, setHour] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    console.log(`Hour: ${hour}`);
  }

  function handleChange(e) {
    setHour(e.target.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Hour:
        <input type="number" value={hour} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

在上面的示例中，我们使用useState钩子来定义hour状态。当用户在输入框中输入小时数时，hour状态将更新。当用户提交表单时，我们将使用console.log来输出输入的小时数。

参考链接

• Date.prototype.getHours()