React를 사용한 사용자 지정 선택 입력

안녕 외계인 👽, 선택 입력에 대한 가장 간단한 패턴을 공유하기 위해 왔습니다. 선택 입력 😥에 어려움을 겪고 있거나 순수 html 선택 입력을 사용하는 데 혼란스럽고 어려움에 직면한 경우 이 블로그는 여러분을 위한 것입니다. 이 블로그에서는 타사 라이브러리를 사용하지 않고 제어된 입력에 대해 논의할 것입니다.
코드로 넘어가겠습니다...💻

// App.js
import "./styles.css";
import Dropdown from "./Dropdown";
import { useState } from "react";
export default function App() {
  const [selected, setSelected] = useState("Choose One");
  return (
    <div className="App">
      {/* custom dropdown menu */}
      <Dropdown selected={selected} setSelected={setSelected} />
      {selected}
    </div>
  );
}

// Dropdown.js
import { useState } from "react";
function Dropdown({ selected, setSelected }) {
  const [isActive, setIsActive] = useState(false);
  const options = ["React", "Vue", "Angular"];
  return (
    <div className="dropdown">
      <div className="dropdown-btn" onClick={(e) => setIsActive(!isActive)}>
        {selected}
        <span className="fas fa-caret-down"></span>
      </div>
      {isActive && (
        <div className="dropdown-content">
          {options.map((option) => (
            <div
              onClick={(e) => {
                setSelected(option);
                setIsActive(false);
              }}
              className="dropdown-item">
            {option}
            </div>
          ))}

        </div>
      )}

    </div>
  );
}
export default Dropdown;

여기서 우리는 옵션 태그에 대한 옵션 배열을 훑고 있습니다.
이것은 완전히 제어되는 구성 요소입니다.

false인 경우 옵션 표시를 업데이트하기 위해 isActive 상태를 생성했습니다. 옵션이 숨겨지고 true인 경우 옵션을 렌더링합니다. 이것은 단순한 조건부 렌더링입니다.

옵션 값을 타겟팅하기 위해 onChange 이벤트를 사용한 후

onChnage에서 이벤트를 캡처하고 있으며 event.target.value를 선택한 상태로 설정하고 있습니다

.

와! 자신만의 맞춤 제어 선택 입력을 만드는 것이 너무 간단합니다. 정보가 마음에 드셨으면 하고 샌드박스 링크를 확인하고 주변에서 놀 수도 있습니다!😺
https://codesandbox.io/s/custom-dropdown-select-oyisxm