构建自定义“时间选择器”组件：一步一步的手撸指南

2023-12-26 12:02:28

前言：脱离示例代码的束缚

踏入前端开发的大门，我们往往不由自主地依赖组件库提供的示例代码，将其原封不动地应用于自己的项目中。然而，当代码行为与我们的设想出现偏差时，我们便会陷入一种迷茫和困惑的境地。为了打破这种依赖，本文将带领你深入浅出地构建一个自定义的“时间选择器”组件，让你从零开始理解组件开发的奥秘。

步骤 1：构思你的组件

在动笔编码之前，先花点时间思考你的组件应该如何工作。列出它的功能、设计和交互方式。对于“时间选择器”组件，我们希望它能够：

以直观的方式选择日期和时间
支持多种格式和自定义选项
轻松集成到现有的 React 应用中

步骤 2：选择一个库

市面上有许多优秀的 React 库可供选择。为了构建我们的“时间选择器”，我们将使用“react-datepicker”库，因为它提供了一个全面且可定制的解决方案。

步骤 3：创建你的组件

使用你选择的库创建组件。在我们的例子中，我们将在一个名为“TimePicker”的新文件中创建组件：

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

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

  return (
    <DatePicker
      selected={date}
      onChange={date => setDate(date)}
      showTimeSelect
      showTimeSelectOnly
      timeIntervals={15}
      dateFormat="MMMM d, yyyy h:mm aa"
    />
  );
};

export default TimePicker;

步骤 4：样式化你的组件

为你的组件添加样式，使其与你应用程序的视觉风格相匹配。你可以使用 CSS、Sass 或 Styled Components。在我们的例子中，我们将在一个单独的文件中定义样式：

.react-datepicker-wrapper {
  width: 100%;
  margin: 0 auto;
}

.react-datepicker-time {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.react-datepicker-time-list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.react-datepicker-time-item {
  width: 50%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 5px;
  cursor: pointer;
}

.react-datepicker-time-item--selected {
  background-color: #ccc;
}

步骤 5：集成到你的应用程序

最后，将你的组件集成到你的 React 应用程序中。在你的主组件中，导入并使用你的组件：

import TimePicker from './TimePicker';

const App = () => {
  return (
    <div className="App">
      <TimePicker />
    </div>
  );
};

export default App;