React에서 input value 값 수정 안될 때

 

리액트에서 input에 text로 값을 입력받을 때  value값은 기본으로 들어가는 값이 되고,

onChange를 통해 이벤트값을 호출합니다.

 

<input type="text" placeholder="제목을 입력하세요" name={Title} maxLength = {30} Value={titleModify} onChange={onTitleHandler} />

 

 

value값에 sessionStorage에 저장된 titleModify의 값을 할당하였습니다.

이때 값은 입력창에 들어오지만 수정이 안되는 상황입니다.

 

 

기본 HTML 문법에서는 value값이 잘 수정되지만 위와 같이 리액트에서 동작을 안하는 경우가 있습니다. 

 

 

 

 

해결방안

 

Value를 defaultValue로 바꿔주면 우리가 알고 있던 것처럼 수정 가능한 value 값을 지정해줄 수 있습니다.

 

<input type="text" placeholder="제목을 입력하세요" name={Title} maxLength = {30} defaultValue={titleModify} onChange={onTitleHandler} />

 

 

 

 

 

 

 

 

참고자료

[React] input요소에 value와 defaultValue의 차이점