时间如何做比较 react 时间选择器

在 React 中比较时间，你可以使用 JavaScript 的内置 Date 对象来处理时间比较。以下是一个示例代码，演示如何在 React 中比较两个时间：
import React, { useState } from 'react';

function TimeComparison() {
const [time1, setTime1] = useState('');
const [time2, setTime2] = useState('');

const handleTime1Change = (event) => {
setTime1(event.target.value);
};

const handleTime2Change = (event) => {
setTime2(event.target.value);
};

const compareTimes = () => {
const date1 = new Date(`1970-01-01T${time1}`);
const date2 = new Date(`1970-01-01T${time2}`);

if (date1 < date2) {
console.log('Time 1 is earlier than Time 2');
} else if (date1 > date2) {
console.log('Time 1 is later than Time 2');
} else {
console.log('Time 1 and Time 2 are the same');
}
};

return (
<div>
<label>Time 1:</label>
<input type="time" value={time1} onChange={handleTime1Change} />

<br />

<label>Time 2:</label>
<input type="time" value={time2} onChange={handleTime2Change} />

<br />

<button onClick={compareTimes}>Compare Times</button>
</div>
);
}

export default TimeComparison;
登录后复制
在上面的代码中，我们定义了两个状态变量 time1 和 time2 来存储时间选择器的值。然后，我们分别为每个时间选择器的 onChange 事件定义了处理函数 handleTime1Change 和 handleTime2Change。
在 compareTimes 函数中，我们将时间字符串与一个固定日期（这里使用 1970 年 1 月 1 日）合并为一个完整的日期对象，并使用 Date 对象进行比较。根据比较结果，我们在控制台输出相应的消息。
最后，我们将状态变量和事件处理函数绑定到相应的输入框和按钮上，使其能够进行时间的比较。
你可以根据需要扩展这个示例，进行更复杂的时间比较操作。