상위 구성 요소에서 하위 구성 요소로 입력 값 상태를 전달하는 React 메서드

Question

내 배열을 통해 매핑하고 다양한 하위 구성 요소의 반복을 인쇄하는 상위 구성 요소가 있습니다.

상위 구성 요소의 상태에 액세스하려고 하는데 하위 구성 요소에서 "inputValue"에 대한 올바른 상태를 추출하여 상위 구성 요소에 넣는 방법을 알 수 없습니다.

이상적으로는 inputValue 및 isValidated 상태가 모두 상위 구성 요소에 존재하여 다양한 양식 기반 함수에서 사용할 수 있기를 바랍니다.

상위 구성요소:

으아아아

하위 구성요소:

으아아아

Answer 1

가장 쉬운 방법은 상위 구성 요소에서 상태를 관리하는 것입니다. 그런 다음 상위 구성 요소의 상태를 업데이트하려면 하위 구성 요소에 prop으로 함수를 전달하면 됩니다. 다음은 앞서 관련 질문에 답변한 예로서 하위 구성 요소에서 상위 구성 요소로 데이터를 전달하는 방법을 보여줍니다.

이런 종류의 소품 드릴링은 직계 하위 구성 요소에만 적합하다는 점에 유의하세요. 상위 구성요소와 하위 구성요소 간의 계층적 관계가 확장되면 컨텍스트/상태 관리가 더 적합합니다.