반작용 나는 다음과 같은 소품이 자동 완성 구성 요소가

더 재사용 가능한 구성 요소 :반작용 나는 다음과 같은 소품이 자동 완성 구성 요소가

value (디스플레이 텍스트),
onChange
onSelect (사용자가
제안 목록에서 무엇인가를 선택하면 선택한 객체 전달 + 선택한 객체의 텍스트 표시 - value과 동일)

상태 : - suggestionsList (구성 요소 내부에있는 상태이므로 결정했습니다.)

보기 중 하나에서이 구성 요소의 상위 항목은 각 키 입력 후 value을 신경 쓰지 않습니다. 그냥 onSelect 처리기로 전달 된 선택한 항목에 관심이 있습니다. 따라서이 시나리오에서는 value & onChange 소품이 필요하지 않습니다. value은 자동 완성 구성 요소의 내부 상태가 될 수 있습니다.

그러나 다른보기 중 하나에서 부모는 각 키 입력에 대해서도 알고 싶어합니다. 이것은 부모가 자신의 주에서 value을 잡고 소품으로 전달해야한다는 것을 의미합니다. onChange 소품은 부모에게 상태를 변경하도록 알리는데도 필요합니다.

두 시나리오를 모두 처리하도록 자동 완성 구성 요소를 구성하는 방법은 무엇입니까? 어느 속성이 소품이어야하며 어느 상태 여야합니까?

의견을 보내 주시면 감사하겠습니다.

출처

2017-05-04 mbudnik

부모가 그 상태에서 값을 보유 할 필요가 없다면 값을 검색 할 수있는'onChange' 핸들러를 제공하면됩니다. 그것의 상태에있는 가치를 붙들어 야 할지도 모르다, * *에는 * 없다. 따라서 컴포넌트가 onChange 프라퍼티 (부모로부터의 함수)를 받으면 자체 onChange와 함께 호출해야합니다. –

@DaveNewton 감사합니다. 유용한 제안입니다. 첫 번째 시나리오는 부모가 '가치'를 필요로하지 않는다는 질문에서 가정합니다. 내 구성 요소의 'value'를 내부 상태로 변경하고 부모에게'onSelect' 소품 처리기로 선택된 항목에 대한 알림을 보냅니다. 지금까지는 괜찮습니다. 두 번째 시나리오는 어떨까요 (부모는 각 키 입력에서 업데이트를 원합니다)?부모가'onChange'를 전달하고 자신의 상태로 값을 저장해야합니까 ('value' 상태는 부모와 자식 모두에서 중복됩니까?)? 내 목표는 두 시나리오를 처리하는 단일 구성 요소를 작성하는 것입니다. – mbudnik

예, 명시된 바와 같이, 부모가 onChange 핸들러를 컴포넌트에 전달하면, 컴포넌트는 내부 onChange 핸들링의 일부로이를 호출해야합니다. –

두 번째 경우 부모가 현재 value에 대해 알아야 할 경우 변수를 보유하지 않아도되므로 내부 상태 변수에서 현재 value을 매개 변수로 전달하면 onChange prop 기능으로 변경되면 부모는 변경 사항을 알리고 그에 따라 업데이트합니다.

또 다른 방법은 value 속성과 내부 상태 변수를 사용하는 것입니다. 내 말은 : 부모가 value을 제어하기를 원하면 그것에 대한 주 항목이 있고 업데이트 할 책임이 있습니다. 다른 경우에는 value 속성이 상수로 끝나기 때문에 제공하지 않아야합니다. 구성 요소는 제공 될 때마다이 속성을 현재 값으로 사용하고 부모는 보유하는 값을 업데이트하기 위해 onChange을 사용해야합니다.

자동 완성 구성 요소의 소스 코드를 material-ui에서 확인할 수 있습니다.

출처

2017-05-04 14:53:43

그래서 패턴을 따라 내부 상태로 'value'를 가지며 제공된 경우 소품으로 설정합니다. 'onChange'는 내부 'value' 상태와 소품으로 전달 된 부모 (parent) 처리자 모두를 갱신 할 것입니다. 나는 그것이 최선의 방법이라고 생각한다. 감사 – mbudnik

반작용 나는 다음과 같은 소품이 자동 완성 구성 요소가

답변

관련 문제