Question

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

基于选择，我将渲染特定的对象数组。有人可以指导我如何设计一个，我尝试查看airbnb的反应日期，但我不希望出现压延机。我也想只使用瞬间但不确定如何设计。如果有人有一个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

如何使用日期范围创建一个简单的React Dropdown

1 个答案: