getReadContent함수를 통해 선택한 data를 가져온다.
state.content 전부를 순회하여 현재 선택된 select_content_id와 비교한다.
TOC 컴포넌트에 주입한 이벤트로 selected_content_id가 동적으로 변경된다.
이제 선택한 data값을 얻었으니 이것을 UpdateContent 컴포넌트에 주입한다.
잘 되는지만 확인하기 위해서 console.log에 찍어보자
잘된다. 이제 updateform안에 해당 data를 넣어보자
input에서 title부분의 value가 this.props.data.title로 한 것을 볼 수 있다.
잘 된다. 하지만 문제점이 있다.
readonly라고 한다. 즉 input데이터는 변경해야 하지만 props는 변경할 수 없기에 readonly 에러가 발생한다. 어떻게 해결할까
생성자함수에 state변수를 선언하고 title값을 초기화한다.
그리고 value값에 바로 props를 담는 것이 아니라 state값을 담아 버리면 어떻게 될까
여전히 에러가 발생한다. 그 이유는 setState를 사용하지 않아서 이다
input에서 변경된 것을 알기 위해서 onChange함수를 사용하고 변경될 때마다 onChange함수가 실행되는데 이때 setState함수를 사용하여 리액트가 State가 변경되었다는 것을 인식할 수 있게 한다.
이제 textarea도 처리해보자
이렇게 하면 될까?
에러가 생긴다 그 이유는 리액트는 유사 html이기 때문이다. html방식대로 태그 사이에 desc를 넣지만 그렇게 하면 되긴하지만 에러가 생긴다. value에 넣어야 한다.
이렇게 해야 한다. 이제 onChange 이벤트를 구현하자
이제 App.js에서 state값의 content부분을 바꿔보자
onSumbit 이벤트에 id값을 추가해준다. 그 이유는 특정 id값만 변하면 되기 떄문이다.
이제 state의 content를 순회하여 id값과 같은 것을 찾고 그 부분을 변경한다. 그리고 setState함수를 통해 리액트에 변경된 것을 인식시킨다.
