react 两个 时间选择器，第二个时间选择器不能早于第一个时间选择器

在 React 中实现两个时间选择器的约束，确保第二个时间选择器的值不早于第一个时间选择器，你可以使用 React 的状态管理来实现。

首先，在你的组件中定义两个状态变量来存储时间选择器的值：

import React, { useState } from 'react';

function TimePickerComponent() {
  const [startTime, setStartTime] = useState('');
  const [endTime, setEndTime] = useState('');

  // 处理时间选择器的变化事件
  const handleStartTimeChange = (event) => {
    const selectedStartTime = event.target.value;
    setStartTime(selectedStartTime);

    // 检查结束时间是否早于开始时间，如果是则重置结束时间
    if (endTime < selectedStartTime) {
      setEndTime('');
    }
  };

  const handleEndTimeChange = (event) => {
    const selectedEndTime = event.target.value;

    // 检查结束时间是否早于开始时间，如果是则不更新结束时间
    if (selectedEndTime >= startTime) {
      setEndTime(selectedEndTime);
    }
  };

  return (
    <div>
      <label>开始时间：</label>
      <input type="time" value={startTime} onChange={handleStartTimeChange} />

      <br />

      <label>结束时间：</label>
      <input type="time" value={endTime} onChange={handleEndTimeChange} min={startTime} />
    </div>
  );
}

export default TimePickerComponent;

在上面的代码中，我们通过 useState 钩子定义了两个状态变量 startTime 和 endTime，分别用于存储开始时间和结束时间的值。然后，我们分别为每个时间选择器的 onChange 事件定义了处理函数 handleStartTimeChange 和 handleEndTimeChange。

在 handleStartTimeChange 中，当开始时间发生变化时，我们首先更新 startTime 的值，然后检查结束时间是否早于开始时间。如果是，则重置结束时间（将其置为空）。

在 handleEndTimeChange 中，当结束时间发生变化时，我们首先检查结束时间是否晚于或等于开始时间。如果是，则更新 endTime 的值。

最后，我们将状态变量和事件处理函数绑定到相应的输入框上，实现了时间选择器的约束。第二个时间选择器的 min 属性设置为 startTime，确保其值不早于开始时间。

这样，当你选择开始时间后，如果结束时间早于开始时间，它将被重置为空。而当你选择结束时间时，如果它早于开始时间，它将不会被更新。这样就实现了第二个时间选择器不能早于第一个时间选择器的约束。