인프런 커뮤니티 질문&답변

형제 선택자에 css 를 적용하기 위해서

state 를 바꿔주는 형식으로 className 을 붙여주었다가 때는 방식으로 css를 바꾸어 적용하면 굳이 Dom에 접근하지 않아도 되겠네요..

더 편리하게 구현이 되네요 ..

빠른 답변 감사 드립니다..^^ 

가능하시면 식사라도 한번 사드리고 싶네요..

리액트에서는 보통 선택자를 거의 쓰지 않습니다. 태그에 해당하는 데이터를 만들어두고(테이블 형식이니 이차원배열이 어울릴 것 같습니다) 데이터를 조작하는 식으로 사용합니다. 데이터가 변경되면 화면은 따라서 바뀌니까요.

감사합니다...^^

첫번째 형제를 배제한 선택자 찾기가 쉽지 않네요..

리액트일때도 동일한 선택자를 사용하시나요?

ref 와 hoc 를 이용해서도 가능할까요?

event.target이 input 태그면 먼저 부모 tr태그를 찾아야 합니다.

event.target.parentNode로 거슬러올라가면서 찾으시면 되고,

찾은 후에는 tr.querySelectorAll('td:not(:first-child)') 하시면 됩니다.

cell안에 input tag 클릭시 첫번째 형제(No 컬럼)를 제외한 모든 형제를 선택하려면 javascript 어떤 선택자를 사용해야 할까요?

감사드립니다. ^^

일단 각 td를 컴포넌트로 분리하는 것이 좋습니다. 그리고 그 컴포넌트에는 row와 column에 대한 정보가 props를 통해서 제공해야 하고요.

컴포넌트에는 state가 두 개 정도 필요할 것 같은데요. 하나는 값을 저장하는 스테이트고, 다른 하나는 컴포넌트 클릭시 input창으로 전환 / input창에서  blur + cancel + save시 일반 텍스트로 전환 여부를 결정하는 state가 될 것 같습니다.

blur, cancel, save시에는 각각에 맞는 동작을 eventListener로 등록하시면 됩니다.

react 로 td 클릭시 아래와 같이 로우 편집 박스를 구현할수있는  방법을 알려주실수 있을까요?

위와 같은 느낌의 테이블을 만드려고 합니다.

질문이 무엇인가요...?