input에서 onChange, onClick 이벤트 모두 사용 시 데이터 미출력 문제

Question

현재 구현하려는 기능은input에서 클릭 시 현재 시간이 출력(onClick)이 되고 그 input를 수정이 가능하도록(onChange) 구현중에 있습니다.list컴포넌트에서 props로 오는 객체 값을 value에 넣으면 시간은 출력이 되지만 키 입력 시 렌더링은 되지만 값이 수정 되지 않습니다.value 값을 TIME 상태값으로 변경하면 onClick 이벤트로 설정된 시간값이 출력되지 않습니다. 콘솔로 찍어 보면클릭 후 list컴포넌트로 넘어오는 props에 time값을 확인하면 시간값이 있는것을 확인됩니다.value ={day.TIME} onChange 렌더링은 확인 및 값 수정할수 없음value = {TIME} onClick 설정된값 미출력 onChage로 인핸 렌더링 및 값 수정 가능제가 놓치고 있는 부분이 있을까요?어떻게해야 제가 원하는 기능을 구현할수 있을까요?선배님들의 지식나눔 부탁드립니다.main.jsx const [list, setList] = useState(data.result); const handlerTime = (index) => { const newItems = [...list]; newItems[index].TIME = newItems[index].TIME === "" ? timeString : newItems[index].TIME; setList(newItems); }; return( {list.length !== 0 ? ( list.map((day, index) => ( )) ) : ( 등록된 날짜가 없습니다. )} ...); SchedulerList.jsx const [currentTIME, setTime] = useState(day.TIME); const onChange = (value) => { setTime(value); }; return ( onChange(e.target.value)} onClick={() => handlerTime(index)} /> );

뚜비뚜밥 · Answer

schedulerList.jsx 에서 main.jsx의 setList를 통해서 데이터를 업데이트 해주어야할 것 같은데요

카르단테 · Answer

지금 input에 value 값이 day.TIME 로 되어있는데 onChange 에서 바뀌는 값은 currentTIME 아닌가요?onChange 시 day.TIME 이 업데이트 되도록 하시고 그걸 다시 currentTIME 으로 설정해주셔야 될 것 같네요.

input에서 onChange, onClick 이벤트 모두 사용 시 데이터 미출력 문제

2개의 답변

Q&A 목록