0
저는 React JS의 초보자이며 방향 제어 기능을 사용하여 객체를 왼쪽 아래로 이동시키는 간단한 애플리케이션을 만들려고합니다. <Object /> 구성 요소의 position state을 업데이트하는 이벤트 처리기가있는 <Object /> 및 <Controls /> (4 개의 단추로 구성)의 두 구성 요소를 만들 계획입니다. 하지만 두 가지 문제가 발생합니다.React JS : 객체를 이동하는 컨트롤이있는 앱을 디자인하십시오.
position state을 저장할 위치는 어디입니까? 아시다시피 플럭스 아키텍처에서는<Controls />구성 요소가<Object />구성 요소 상태를 업데이트 할 수 없습니다.- 하나의 이벤트 핸들러를 작성하여 4 개의 유사한 버튼 (위, 아래, 왼쪽, 오른쪽)을 제공하는 방법은 무엇입니까? 4 개의 별도 기능을 작성하는 것은 좋지만 하나만 사용할 수 있습니까?
위의 2 가지 질문에 올바른 방법을 조언 해 주시겠습니까?
감사합니다. 당신이 볼 수 있듯이 https://jsfiddle.net/zL4vmq0L/
는, move, 모든 상태를 보유하고 있으며 상태 변경 기능으로 전달하는 App 구성 요소가있다 :
는 mockup: control buttons to move objects
감사합니다. Filipe, 대단합니다. 여러 구성 요소가 서로 다른 상태를 업데이트해야하는 경우를 대비해 요청할 수 있습니다. 패턴은 항상 부모 구성 요소에'state'를 저장하고'props'를 통해 자식에 전달합니다. – quynhu
질문 2에 관해서는, event handler, 즉'event.target','refs' 또는'key'를 사용하여 어떤 버튼이 클릭되었는지 식별하는 것이 일반적입니까? 또는 이벤트 처리기 함수에 대한 id 매개 변수에 대한 다른 방법이 있습니까? – quynhu
redux를 살펴보면 상태는 응용 프로그램의 루트에 저장됩니다. 그래서 예, 데이터를 조직하는 방법의 현재 상태. 두 번째 질문에 대해서는 이와 비슷한 이벤트를 식별 할 수 있습니다. 그러나 내 경험에 비추어 볼 때 이벤트 객체에 의존하지 않고 일반 인수를받는 경우 함수를 테스트하고 다시 사용하는 것이 더 쉽습니다. –