리액트 셀렉트 질문입니다.

Question

안녕하세요 초보 프론트엔드 개발자입니다.하위컴포넌트에 있는 셀렉트 박스에서 선택한 값을 상위 컴포넌트에서 이용하려고 하는데 잘 안되서 질문드립니다.import React, { useState } from 'react'; import { Button } from "../../ui/button"; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DialogClose } from "../../ui/dialog"; import { Input } from "../../ui/input"; import SelectBox from "./SelectBox"; function UserRegistrationButton() { const [id, setId] = useState(''); const [name, setName] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [ip, setIp] = useState(''); const [selectedAuthority, setSelectedAuthority] = useState(""); const items = [ { value: '1', label: '일반' }, { value: '2', label: '마스터' }, ]; const handleDataChange = (newData) => { setSelectedAuthority(newData); }; const handleSubmit = () => { console.log({ id, name, password, confirmPassword, ip, selectedAuthority }); }; return ( ); } export default UserRegistrationButton;import React, { useState, useEffect } from 'react'; import { Select, SelectValue, SelectTrigger, SelectContent, SelectItem, } from '../../ui/select'; interface SelectBoxProps { className?: string; items: { value: string; label: string }[]; onDataChange: any; } const SelectBox: React.FC = ({ className, items, onDataChange }) => { const [selectedValue, setSelectedValue] = useState(""); const sendDataToParent = (payload) => { onDataChange(payload); console.log(payload, selectedValue) }; return ( ); }; export default SelectBox;제 코드인데요 현재 shadcn/ui를 쓰면서 진행중인데요shadcn/ui 에 있는 Select를 썼는데요 셀렉트 박스가 하위컴포넌트이고 상위 컴포넌트로 셀렉트 박스가 선택한 값을 보내고 싶은데 할 수 있는 방법 다 해도 안되더라고요 현재 코드는 콜백함수를 이용하여 데이터를 호출하려고 했는데 실패했습니다. 이럴 때는 무조건 리덕스나 리코일 같은 전역으로 상태관리를 해서 값을 주는 방법 밖에는 없나요 ? 아니면 다른 방법이 있으면 알려주세요

눈맞는뉴비 · Answer

const [value, setValue] = useState('');return (<Select value={value} onValueChange={setValue}>...)이런식으로 온클릭이 아니라 셀렉트에 onValueChange를 써서 해보세요.

리액트 셀렉트 질문입니다.

1개의 답변

Q&A 목록