Simple React 드롭다운 목록 구성 요소
5721 단어 reactjavascripthooks
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [selectedValue, setSelectedValue] = useState(0);
const items = [
{ label: "Default", value: selectedValue },
{ label: "2 Rows", value: 2 },
{ label: "4 Rows", value: 4 },
{ label: "6 Rows", value: 6 }
];
const handleChange = (event) => {
console.log(event.target.value);
setSelectedValue(event.target.value);
};
return (
<div className="App">
<h1>Simple Dropdown List</h1>
<form>
<select className="form-select" onChange={handleChange}>
{items.map((item) => (
<option key={item.label} value={item.value}>
{item.label}
</option>
))}
</select>
</form>
<p>You have selected: {selectedValue}</p>
</div>
);
}
도움이 되었기를 바랍니다!
Reference
이 문제에 관하여(Simple React 드롭다운 목록 구성 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/drlorenesi/simple-react-dropdown-list-component-201텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)