reactjs - 如何使用日期范围创建一个简单的 React 下拉菜单

Question

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

基于 selection ，我将渲染一个特定的对象数组。有人可以指导我如何设计一个，我尝试查看 airbnb react-dates，但我不想弹出日历。我也在考虑简单地使用时刻，但不知道如何设计一个。如果有人有一个codepen示例，请帮助我。

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);

或查看此链接：https ://codesandbox.io/s/xj53396w8o