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>
  );
}


도움이 되었기를 바랍니다!

좋은 웹페이지 즐겨찾기