개발자
여러개 input의 onChange처리 어떻게 해야하나요?
2023년 06월 16일•조회 409
input을 여러 개 관리해야 하는데 이름, 나이 이런 input 관리가 아닌 항목 추가(카카오톡 투표하기)처럼 name으로 구별하기 어려운 inputs를 구현하고 있는데(단순한content로 되어있습니다.) onChange를 어떻게 처리를 해야 줘하는지 감이 안 잡히는데 구현해 보신 분 있으실까요? 이 input들은 최대 30개까지 추가가 됩니다. +) 추가되는 인풋을 component로 따로 빼서 구현했습니다. const [contents, setContents] = useState([ { id: 1, content: '' }, { id: 2, content: '' } ]) {contents.map(() => ( <Input/> 이런식으로 되어있습니다!!!
이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이
더 많은 사람에게 노출될 수 있어요.
'보충이 필요해요' 버튼을 누르면 질문자에게
질문 내용 보충을 요청하는 알림이 가요.
익명님의 질문
답변 2
정답이라고 할 순 없지만 저라면 useReducer를 사용할것 같습니다. 도움이 되셨음 좋겠네요
1const reducer = (state, action) => {
2 switch(action.type) {
3 case 'UPDATE':
4 case 'ADD':
5 return {
6 ...state,
7 [action.key]: action.value
8 };
9 case 'REMOVE':
10 const {[action.key]: deleted, ...others} = state
11 return others;
12 }
13}
14const [status, dispatch] = useReducer(reducer , {})
15
16//input 추가
17const addInput = () => {
18 dispatch({type: 'ADD', key: (UUID, hash 같은 임의의 key값), value: null})
19}
20//input 삭제
21const addInput = () => {
22 dispatch({type: 'REMOVE', key: (삭제하려는 input의 key값)})
23}
24
25{Object.keys(status).map((item) => (
26 <Input onChange={e => dispatch({type: 'UPDATE', key: item, value: e.target.value})}/>
27}
react-hook-form 의 useFieldArray를 쓰신다면 쉽게 구현하실 수 있습니다 https://react-hook-form.com/docs/usefieldarray
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!