用react写一个选择年月日时分秒插件

很高兴为您提供帮助。下面是一个简单的React组件，可以选择年月日时分秒：

import React, { useState } from 'react';

const DateTimePicker = () => {
  const [date, setDate] = useState(new Date());

  const handleChange = (e) => {
    const { name, value } = e.target;
    const newDate = new Date(date);
    switch (name) {
      case 'year':
        newDate.setFullYear(value);
        break;
      case 'month':
        newDate.setMonth(value - 1);
        break;
      case 'day':
        newDate.setDate(value);
        break;
      case 'hour':
        newDate.setHours(value);
        break;
      case 'minute':
        newDate.setMinutes(value);
        break;
      case 'second':
        newDate.setSeconds(value);
        break;
      default:
        break;
    }
    setDate(newDate);
  };

  return (
    <div>
      <select name="year" value={date.getFullYear()} onChange={handleChange}>
        {Array.from(Array(10)).map((_, i) => (
          <option key={i} value={date.getFullYear() + i}>
            {date.getFullYear() + i}
          </option>
        ))}
      </select>
      <select name="month" value={date.getMonth() + 1} onChange={handleChange}>
        {Array.from(Array(12)).map((_, i) => (
          <option key={i + 1} value={i + 1}>
            {i + 1}
          </option>
        ))}
      </select>
      <select name="day" value={date.getDate()} onChange={handleChange}>
        {Array.from(Array(31)).map((_, i) => (
          <option key={i + 1} value={i + 1}>
            {i + 1}
          </option>
        ))}
      </select>
      <select name="hour" value={date.getHours()} onChange={handleChange}>
        {Array.from(Array(24)).map((_, i) => (
          <option key={i} value={i}>
            {i}
          </option>
        ))}
      </select>
      <select name="minute" value={date.getMinutes()} onChange={handleChange}>
        {Array.from(Array(60)).map((_, i) => (
          <option key={i} value={i}>
            {i}
          </option>
        ))}
      </select>
      <select name="second" value={date.getSeconds()} onChange={handleChange}>
        {Array.from(Array(60)).map((_, i) => (
          <option key={i} value={i}>
            {i}
          </option>
        ))}
      </select>
    </div>
  );
};

export default DateTimePicker;

这个组件使用了React的useState钩子来管理日期状态。当用户更改日期时，handleChange函数会根据用户选择的选项更新日期。每个select元素都有一个name属性，用于在handleChange函数中确定要更新的日期部分。

这个组件只是一个简单的示例，您可以根据自己的需求进行修改和扩展。