input 태그에 vaule 값 설정시 수정 불가

Question

다음과 같이 데이터를 조회한 데이터를 input 태그에 뿌려주려고 합니다.input 태그 value 속성이 없을 때는 정상적 입력되는데, value 속성이 있을때는 커서만 깜박이고 입력이 안되는지 모르겠습니다. - 수정 불가 //{profile_uid: 100000000000143, tname: '테스트 230920-1', tgenre: 4, ticonuid: 300000000000659, tscreenuid: 300000000000660, …} return(

앱 이름(필수)

)

웅프 · Accepted Answer

리액트에서 <input> 태그에 value prop을 넘기지 않으면 uncontrolled component가 됩니다.리액트에서는 상태값 변경을 통해 리액트에 의존한 re-render를 일으켜서 DOM을 업데이트하게 되는데요. uncontrolled component의 경우 DOM이 리액트 re-render가 아닌 브라우저를 통해 직접적으로 업데이트됩니다.react에서는 DOM객체에 직접 접근해서 값을 얻어오는 방식으로는 코딩하지 않습니다. onChange 이벤트를 통해 state를 변경하는 방식으로 value를 업데이트하면 기대하는 방식으로 동작할겁니다.

빠른코딩 · Answer

리액트 인풋 예제 한번 보세여

냥냥가면 · Answer

상태관리 찾아보세요!

그린티라떼 · Answer

onChange 함수 적용했습니다. 이젠 value 값이 수정 됩니다.... ) => setAppProfileForm({...appProfileForm, tname : e.target.value})} />

input 태그에 vaule 값 설정시 수정 불가

4개의 답변

기술 목록