如何创建一个具有日期范围的简单React Dropdown

Question

我是React的新手，我想设计一个简单的下拉列表，包括：最近30天、最近60天、最近6个月。

根据选择，我将渲染一个特定的对象数组。有人能指导我如何设计日历吗？我试着看了一下airbnb的反应日期，但我不想弹出日历。此外，我也在考虑简单地使用瞬间，但不确定如何设计一个。如果有人有一个代码笔的例子，请帮助我。

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