如何创建一个带有日期范围的简单 React 下拉列表

Question

我是 React 的新手，我想设计一个简单的下拉菜单，其中包含以下选项：过去 30 天、过去 60 天、过去 6 个月。

根据选择，我将呈现一组特定的对象。有人可以指导我如何设计吗，我尝试查看 airbnb 反应日期，但我不想弹出日历。我也在考虑简单地使用 moment 但不确定如何设计。如果有人有代码笔示例，请帮助我。

Answer 1

我使用 'reactstrap' 创建下拉按钮并将选项放入数组中。你可以在这里找到我的代码：

import React from "react";
import ReactDOM from "react-dom";
import { Input } from "reactstrap";
import "./styles.css";

function App() {
  const options = [
    { option1: "1" },
    { option2: "2" },
    { option3: "3" },
    { option4: "4" }
  ];
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Input type="select">
        {options.map(option => {
          return (
            <option value={Object.values(option)}>
              {" "}
              {Object.keys(option)}{" "}
            </option>
          );
        })}
      </Input>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

或检查此 link：https://codesandbox.io/s/xj53396w8o

如何创建一个带有日期范围的简单 React 下拉列表

How to create a simple React Dropdown with Date range

date-range

reactjs

react-dates