Typescript |如何使用数组操作下拉列表中的值

Question

我必须使用React&引导程序&TypeScript。我该怎么做？像这样的下拉值years = ["2018",2019","2020","2021"]将来自这样的道具：

Export interface Csprops{ years:string[] }
export const Cs=({ years, }:CsProps):JSX.Element =>{ }

Answer 1

如果您想使用react bootstrap默认下拉列表，这里是一个示例，假设年份是一个常数，如果它是一个道具，您可以将它作为道具传递给这个函数，并将其称为props.years。

当您更改年份并使其成为当前selectedYear状态时，您将需要一个onClick侦听器。

import { useState } from "react";
import { Container, Dropdown } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
const years = ["2018", "2019", "2020"];
export default function App() {
const [selectedYear, setSelectedYear] = useState("");
function yearsDropdown() {
return years.map((year) => (
<Dropdown.Item
onClick={() => setSelectedYear(year)}
href={`#year-${year}`}
>
{year}
</Dropdown.Item>
));
}
return (
<Container>
<Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
{selectedYear || `Select Year`}
</Dropdown.Toggle>
<Dropdown.Menu>{yearsDropdown()}</Dropdown.Menu>
</Dropdown>
</Container>
);
}