私はReactを初めて使用し、次のようなオプションを持つ単純なドロップダウンを設計したいと思います：過去30日間、過去60日間、過去6か月。
選択に基づいて、オブジェクトの特定の配列をレンダリングします。誰かが私にそれをデザインする方法を教えてもらえますか、私はairbnbのreact-datesを見てみましたが、カレンダーがポップアップしたくありません。また、私は単に瞬間を使うことを考えていましたが、それをどのように設計するかがわかりませんでした。誰かがcodepenの例を持っているなら、私を助けてください。
'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
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加